css 三角形

最新推荐文章于 2024-08-31 21:39:38 发布

weixin_33857679

最新推荐文章于 2024-08-31 21:39:38 发布

阅读量63

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3680343/blog/1858366

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.无边框三角形

条件：width,height设置为0，border-width设置一定的宽度,border-color保留一边有颜色其他三边设置透明

.triangle{
    width:0px;
    height:0px;
    border-width:40px;
    border-style: solid;
	border-color: #FF7F24 transparent transparent transparent;
}

效果：

2.有边框三角形

由于我们写三角形的时候用到的就是border，所以给三角形添加边框就不能再用border属性了，我们就使用元素覆盖，设置大小不一样的边框，大的在下面，这就用到position:absolute,

//html
<div class="triangle-border">
	<div class="triangle"></div>
</div>

//css
.triangle{
	position:absolute;
	left:0px;
	top:0px;
	width:0px;
	height:0px;
	border-width:40px;
    border-style: solid;
	border-color: #FF7F24 #EEC900 #E066FF #90EE90;;
}
.triangle-border{
    position:relative;
	width:0px;
    height:0px;
    border-width:42px;
    border-style: solid;
    border-color: #FF7F24 #EEC900 #E066FF #90EE90;;
}

效果如下：

绝对定位并没有覆盖到父元素上，因为我们的三角形是边，而不是真正的内容区域，绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。由于父元素div内容为空，content的内容在中心，所以子元素是根据中心点来定位的，我们知道这个原理，微调下子元素的定位即可,然后把父元素的边框颜色设置为边框色

.triangle{
    position:absolute;
	left:-40px;//修改这行
	top:-40px;//修改这行
	width:0px;
	height:0px;
	border-width:40px;
	border-style: solid;
	border-color: #FF7F24 #EEC900 #E066FF #90EE90;
}
.triangle-border{
	position:relative;
    width:0px;
    height:0px;
    border-width:42px;
    border-style: solid;
    border-color: #333;//修改颜色
}

效果如下：

然后隐藏父元素，子元素其他三个边就可以

<!DOCTYPE html>
<html>
	<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>img</title>
		<style>
		    html,body{
		        width: 100%;
		        height: 100%;
		        padding:0;
		        margin:0;
		    }
		    /*border-color: #FF7F24 #EEC900 #E066FF #90EE90;*/
		    .triangle{
		        position:absolute;
		        left:-40px;
		        top:-41px;
		        width:0px;
		        height:0px;
		        border-width:40px;
		        border-style: solid;
		        border-color: #FF7F24 transparent transparent transparent;
		    }
		    .triangle-border{
		        position:relative;
		        width:0px;
                height:0px;
                border-width:42px;
                border-style: solid;
                border-color: #333 transparent transparent transparent;
		    }
		</style>
	</head>
	<body>
	    <div id="main">
	        <div class="triangle-border">
	            <div class="triangle"></div>
	        </div>
	    </div>
	    <script>
	    </script>
	</body>
</html>