如何使用CSS创建注释形状
如何使用CSS创建注释形状
提问于 2015-01-19 21:07:04
可以使用CSS代码制作如下所示的形状吗？
我试过了，但是我做不到，所以我需要一些帮助。
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}<div id="demo"></div>
回答 2
Stack Overflow用户
发布于 2015-01-19 21:23:07
试试这个：
.speech-bubble {
border-radius: 2px;
color: #fff;
margin: 1em 0 3em;
padding: 15px;
position: relative;
border: solid 2px #000;
color: #000;
}
.speech-bubble:after, .speech-bubble:before {
top: 100%; left: 90%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.speech-bubble:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 20px 0 0 20px;
margin-left: -20px;
}
.speech-bubble:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000;
border-width: 27px 0px 0px 27px;
margin-left: -24px;
}<div class="speech-bubble">This is a speech bubble</div>
Stack Overflow用户
发布于 2015-01-19 21:22:07
div.icon {
height: 32px;
width: 32px;
position: relative;
margin: 15px;
overflow: hidden;
display: inline-block;
}
div.icon div.chat {
width: 32px;
height: 22px;
background: #333;
}
div.icon div.chat:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-color: #333 transparent transparent transparent;
border-width: 5px;
position: absolute;
top: 16px;
left: 2px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}<div class="icon">
<div class="chat"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28025321
复制相关文章
相似问题