手mo手画正反三角形
不废话直接上图、上代码.
实现方法:
1.利用”◆“字符实现三角形
2.还可以利用 CSS3 transfrom 旋转 45 度实现三角形.
3.今天用的是用border+transparent来实现.
<div class="down"></div>
<style>
.down {
margin-top: 50px;
margin-left: 100px;
width: 0;
height: 0;
border-style: solid;
/* 正三角形 */
border-width: 0 40px 40px 40px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
/* 倒三角 */
/* border-width: 40px 40px 0 40px;
border-color: rgb(245, 129, 127) transparent transparent transparent;
*/
/* 向右 */
/*
border-width: 40px 0 40px 40px;
border-color: transparent transparent transparent rgb(245, 129, 127);
*/
/* 向左 */
/*
border-width: 40px 40px 40px 0;
border-color: transparent rgb(245, 129, 127) transparent transparent;
*/
}
</style>
/* 右下 */
/*
border-width: 40px 40px 0 40px ;
border-color: transparent rgb(245, 129, 127) transparent transparent;
*/
/*右上 */
/*
border-width:0 40px 40px 40px;
border-color: transparent rgb(245, 129, 127) transparent transparent;
*/
/*左上 */
/*
border-width: 0 40px 40px 40px;
border-color: transparent transparent transparent rgb(245, 129, 127) ;
*/
/* 左下 */
/*
border-width: 40px 40px 0 40px;
border-color: transparent transparent transparent rgb(245, 129, 127) ;
*/