CSS实现DIV三角形

本文主要是介绍CSS实现DIV三角形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文内容收集来自网络

#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;
}

#triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;
}

#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;
}

#triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;
}

#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;
}

#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent; 
}

#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;
}

#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;
}

<!-- 外框 -->
<div class="mod-container"><!-- 小三角部分 --><div class="mod-triangle"><div class="t-border"></div><div class="t-inset"></div></div>
</div>

/*外框容器*/
.mod-container {width:100px;height:60px;border:1px solid #000;margin:20px;background:#fff;
}
/*小三角部分*/
.mod-triangle {display:block;position:relative;left:-23px;top:18px;z-index:20;
}
.mod-triangle .t-border,
.mod-triangle .t-inset{left:0px;top:0px;width:0;height:0;font-size:0;overflow:hidden;position:absolute;border-width:12px;/*可在此处更改小三角方向：上-右-下-左（solid的位置）*/border-style:dashed solid dashed dashed;
}
/*小三角的边框，如果不需要，可将颜色值改变*/
.mod-triangle .t-border{border-color:transparent #000 transparent transparent;left:-1px;
}
.mod-triangle .t-inset{border-color: transparent #fff transparent transparent;
}

这篇关于CSS实现DIV三角形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！