仅使用HTML以及CSS制作一个三角形

 MeLiu   2018-09-27 20:23   561 人阅读  1 条评论



这里我们使用的是伪元素来制作一个三角形


先使用伪元素 before 或者 after  添加一个只有边框的空元素并设置边框 宽度 以及 solid,


这是在使用border-color来隐藏三角形多余的部分


隐藏方法就是把颜色设置成透明 例如 #FFFFFF00


transparent的颜色编码就是 #FFFFFF00


直接上代码

<div></div>
<style type="text/css">
	div{margin: 100px auto;width: 900px;}
	div::before{
	    content: ' ';
	    border: 100px solid #fff;

	    border-color: transparent  transparent 	     red 	  transparent;
	   /* 		  上部分三角	右部分三角	  下部分三角      左部分三角	*/
	}
</style>



效果图

htmlcsssanjiao.JPG

本文地址:https://www.mobaishare.com/post/3.html
版权声明:本文为原创文章,版权归 MeLiu 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了

 发表评论


表情

 评论列表

  1. 小程序/网站开发
    小程序/网站开发  @回复

    伪元素三角形