1.画三角形干嘛?或者问它能干吗?
三角形在开发中经常用到,比如气泡,箭头,等一些标示指向的图形或者需求。
2.怎么?三角形?
很简单,利用边框属性:border。
1.第一步画一个矩形
- 画一个矩形,边框宽度设置为40px,
- 上下左右边框的颜色分别使用不同的颜色
- 矩形宽高都是40px,背景色红色。
<div>
<div class="triangle"></div>
</div>
css:
.triangle{
width: 40px; /* 矩形宽度 */
height:40px; /* 矩形高度 */
background: red; /* 矩形背景颜色*/
border-width: 40px;/* 边框宽度 */
border-style: solid;/* 边框为实线 */
border-color: #3385ff #ffab00 #00ff00 #BF974D;/* 边框颜色 上 右 下 左*/
}
2.出现三角形
.triangle{
width: 0px;
height:0px;
border-width: 40px;/* 边框宽度 */
border-style: solid;/* 边框为实线 */
border-color: #3385ff transparent transparent transparent;
/*border-color: transparent #ffab00 transparent transparent;*/
/*border-color: transparent transparent #00ff00 transparent;*/
/*border-color: transparent transparent transparent #BF974D;*/
}