css 制作三角形

style:

/*制作三角形的原型*/

.arrow{

margin:50px;

width:0;

height:0;

font-size:0;

border:10px solid;

/*border-color:#f00 #0f0 #00f #000;*/

/*隐藏任意三三条边的颜色*/

border-color:#fff #fff #fff #00aaef;

}

html:

<div class="arrow"></div>

效果：



制作气泡对话框：

style:

send {

position: relative;

width: 150px;

height: 35px;

background-color: #00aaef;

border-radius: 5px;

/*圆角*/

margin: 30px auto 0;

}

.send .arrow {

position: absolute;

top: 5px;

width: 0;

height: 0;

font-size: 0;

border: 10px solid;

border-color: #fff #fff #fff #00aaef;

right: -19px;

/*调整三角形的位置*/

}

html:

<div class="send">

<div class="arrow"></div>

</div>

效果：