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 技術內幕——說存儲

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。