我对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>
如何完成两个部分之间的角度?