css 三角形

时间 2019-11-24

标签 css 三角形栏目 CSS 繁體版

原文原文链接

1.无边框三角形css

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

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

效果：spa

2.有边框三角形code

因为咱们写三角形的时候用到的就是border，因此给三角形添加边框就不能再用border属性了，咱们就使用元素覆盖，设置大小不同的边框，大的在下面，这就用到position:absolute,htm

//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;;
}

效果以下：blog

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

.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;//修改颜色
}

效果以下：it

而后隐藏父元素，子元素其余三个边就能够io

<!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>

1. css三角形
2. CSS 之三角形
3. css画三角形
4. CSS画三角形
5. CSS矩形、三角形等
6. css/less画三角形
7. css手绘三角形
8. 使用css画三角形
9. html+css写三角形
10. 用css写个三角形
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• RxJava操作符（三）Filtering
• 三篇文章了解 TiDB 技术内幕——说存储