用CSS屬性transparent實(shí)現(xiàn)各種三角形示例代碼
發(fā)布時(shí)間：2016-12-18 17:13:01 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要給大家介紹了如何用CSS屬性transparent實(shí)現(xiàn)各種三角形，文中給出了詳細(xì)的示例代碼，有需要的朋友們可以參考借鑒，下面來跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
效果圖如下
示例代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: 40px auto;
width: 60px;
background-color: #f0ac6b;
}
.t1{
margin: 40px auto;
width: 0px;
height: 0px;
/*background-color: #f0ac6b;*/
border-bottom: 40px solid red;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.t2{
margin: 40px auto;
width: 0px;
height: 0px;
/*background-color: #f0ac6b;*/
border-bottom: 40px solid transparent;
border-right: 40px solid red;
/*border-left: 20px solid transparent;*/
}
.t3{
margin: 40px auto;
width: 0;
height: 0;
border-top: 40px solid red;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.t4{
margin: 40px auto;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid red;
}
.t5{
margin: 40px auto;
width: 0;
height: 0;
border-top: 40px solid red;
border-right: 40px solid transparent;
}
.t6{
margin: 40px auto;
width: 0px;
height: 0px;
border-left: 40px solid transparent;
border-bottom: 40px solid red;
}
.t7{
margin: 40px auto;
width: 0;
height: 0;
border-left: 40px solid red;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
}
.t8{
margin: 40px auto;
width: 0;
height: 0;
border-right: 40px solid red;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
}
</style>
</head>
<body>
<div class="box">
<div class="t1"></div>
<div class="t3"></div>
<div class="t2"></div>
<div class="t4"></div>
<div class="t5"></div>
<div class="t6"></div>
<div class="t7"></div>
<div class="t8"></div>
</div>
</body>
</html>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
css 中的background:transparent到底是什么意思有什么作用
css 中的 transparent到底是什么意思? 一直覺得很奇怪,到底有什么用的啊?,本文將詳細(xì)說明，需要的朋友可以參考下2012-12-12- 相信大家在日常網(wǎng)站布局中，經(jīng)常遇到一些三角形形狀的按鈕，有的人可能會(huì)想到用圖片代替，其實(shí)我們利用css就可以實(shí)現(xiàn)，本文給大家介紹了利用css繪制三角形的方法，以及一些2016-10-17
- 這篇文章主要介紹了CSS3 畫基本圖形，圓形、橢圓形、三角形等的相關(guān)資料,需要的朋友可以參考下2016-09-20
- 本文給大家?guī)硪欢未a基于div+css實(shí)現(xiàn)三角形提示框，代碼簡(jiǎn)單易懂，需要的朋友可以參考下2016-09-20
- 下面小編就為大家?guī)硪黄肅SS制作三角形和按鈕的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-15
CSS仿網(wǎng)易首頁(yè)的頭部菜單欄按鈕和三角形制作方法
這篇文章主要介紹了CSS仿網(wǎng)易首頁(yè)的頭部菜單欄按鈕和三角形制作方法的相關(guān)資料,需要的朋友可以參考下2016-08-15利用CSS偽元素創(chuàng)建帶三角形的提示框的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄肅SS偽元素創(chuàng)建帶三角形的提示框的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-01- 這篇文章主要為大家詳細(xì)介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下2016-06-28
- 這篇文章主要為大家詳細(xì)介紹了Html+CSS繪制三角形圖標(biāo)的相關(guān)代碼，很多網(wǎng)頁(yè)都有三角形的圖標(biāo)，通常是切的圖片，這里可以用css3+html寫出三角形，感興趣的小伙伴們可以參考2016-06-17
使用CSS實(shí)現(xiàn)小三角形效果【附實(shí)例】
下面小編就為大家?guī)硪黄褂肅SS實(shí)現(xiàn)小三角形效果【附實(shí)例】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-04-14