html - 你如何创建这个三 Angular 形的东西？

Question

如何为指向某物的容器创建三 Angular 形？是 Photoshop 吗？

Answer 1

可以be done in pure CSS ，但图像将是更明智的选择。

HTML:

<div id="bubble">
    Yes we can
    <div id="arrow"></div>
    <div id="arrow-border"></div>
</div>

CSS:

#bubble {
    border:2px solid #036;
    font-size:20px;
    padding:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    width:100px;
    position:relative;
}

#arrow {
    border-color: #036 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
    height:0px;
    width:0px;
    position:absolute;
    bottom:-40px;
    left:20px;
}

#arrow-border {
    border-color: #fff transparent transparent transparent;
    border-style:solid;
    border-width:20px;
    height:0px;
    width:0px;
    position:absolute;
    bottom:-37px;
    left:20px;
}