Question

请任何人帮助我如何使用css创建下图。

    ________/\_______
   |                |
   |                |
   |                |
   |________________|

请帮助我如何使用css进行操作。只应使用 div 。

Answer 1

见这里：http://jsfiddle.net/alexwcoleman/6ue8vvba/

.box {
    position: relative;
    border: 1px solid #000;
    height:100px;
    width:300px;
    margin-top:100px;
    background:#fff;
}
.box:after, .box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #fff;
    border-width: 30px;
    margin-left: -30px;
}
.box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #000;
    border-width: 31px;
    margin-left: -31px;
}

Answer 2

此代码用于创建三角形：

HTML:
<div id="talkbubble"></div>

CSS:
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
    margin-top: 50px;
}
#talkbubble:before {
   content: "";
position: absolute;
right: 43%;
bottom: 100%;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-bottom: 25px solid red;
border-right: 11px solid transparent;
}

在这里看到演示：DEMO

如何使用css创建三角形

2 个答案: