CSS 3 – 状态之后和之前的圆角

前端之家收集整理的这篇文章主要介绍了CSS 3 – 状态之后和之前的圆角前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我对CSS 3有一点问题,即我会用一个项目创建这样一个对象.
这是我想要实现的目标的图像:

这就是我的意思:

CSS:

body{
background:grey;
    padding:10px;
}
#talkbubble {
margin:0 auto;
Box-shadow: 3px 10px 7px #deefe5;
   width: 590px;
   height: 160px;
   background: white;
   position: relative;
   border-radius:10px;
   border-bottom-left-radius:0px;
}
#talkbubble:before {
Box-shadow: 10px 10px 5px #deefe5;
   content:"";
   position: absolute;
   background:white;
   top: 100%;
   width: 228px;
   height: 62px;
   border-bottom-left-radius:         10px;
   border-bottom-right-radius:         10px;

}
#talkbubble:after{
   content:"";
   position: absolute;
   top:100%;
   left:228px;
   border-top: 10px solid white;
   border-right: 10px solid transparent;
   background:white;


}​

HTML:

<div id="talkbubble"></div>​

一个jsFiddle demo

如何完成两个部分之间的角度?

解决方法

简答:你不能.

你在那里做了什么已成功创建一个框:在DIV元素之后,但如果你开始在DIV中输入文本,它将不会“流入”到底部.

为了实现你在CSS3中的目标,你需要至少3个DIV和透明效果,你仍然会遇到文本溢出的问题.

原文链接:https://www.f2er.com/css/215615.html

猜你在找的CSS相关文章