你怎么创造这个三角形的东西？

Question

如何为指向某个东西的容器创建三角形的东西？是photoshop吗？

Answer 1

它可以在纯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;
}