CSS技巧-CSS的形状有很多不同的CSS形状,我特别困惑于三角形:
#三角形向上{宽度:0;高度:0;左边框:50px实心透明;右边框:50px实心透明;边框底部:100px纯红色;}<div id=“triangle up”></div>
它是如何以及为什么工作的?
CSS技巧-CSS的形状有很多不同的CSS形状,我特别困惑于三角形:
#三角形向上{宽度:0;高度:0;左边框:50px实心透明;右边框:50px实心透明;边框底部:100px纯红色;}<div id=“triangle up”></div>
它是如何以及为什么工作的?
当前回答
这是另一把小提琴:
.container:after {
position: absolute;
right: 0;
content: "";
margin-right:-50px;
margin-bottom: -8px;
border-width: 25px;
border-style: solid;
border-color: transparent transparent transparent #000;
width: 0;
height: 0;
z-index: 10;
-webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
bottom: 21px;
}
.container {
float: left;
margin-top: 100px;
position: relative;
width: 150px;
height: 80px;
background-color: #000;
}
.containerRed {
float: left;
margin-top: 100px;
position: relative;
width: 100px;
height: 80px;
background-color: red;
}
https://jsfiddle.net/qdhvdb17/
其他回答
这是一个老问题,但我认为值得分享如何使用这种三角形技术创建箭头。
步骤1:
让我们创建两个三角形,对于第二个,我们将使用:after伪类,并将其放置在另一个的正下方:
.箭头{宽度:0;高度:0;边框半径:50px;显示:内联块;位置:相对;}.arrow:在之后{内容:“”;宽度:0;高度:0;位置:绝对;}.向上箭头{左边框:50px实心透明;右边框:50px实心透明;边框底部:50px实心#333;}.向上箭头:之后{顶部:5px;左边框:50px实心透明;右边框:50px实心透明;边框底部:50px实心#ccc;右:-50px;}<div class=“arrow arrow up”></div>
步骤2
现在,我们只需将第二个三角形的主要边界颜色设置为与背景相同的颜色:
.箭头{宽度:0;高度:0;边框半径:50px;显示:内联块;位置:相对;}.arrow:在之后{内容:“”;宽度:0;高度:0;位置:绝对;}.向上箭头{左边框:50px实心透明;右边框:50px实心透明;边框底部:50px实心#333;}.向上箭头:之后{顶部:5px;左边框:50px实心透明;右边框:50px实心透明;边框底部:50px实心#fff;右:-50px;}<div class=“arrow arrow up”></div>
摆弄所有箭头:http://jsfiddle.net/tomsarduy/r0zksgeu/
更进一步,使用基于此的css,我在上一个按钮和下一个按钮上添加了箭头(是的,我知道它不是100%跨浏览器,但仍然很流畅)。
.三角形{宽度:0;高度:0;左边框:50px实心透明;右边框:50px实心透明;边框底部:100px纯红色;边距:20px自动;}.向下三角形{边框底部:无;边框顶部:100px纯红色;}.左三角形{左侧边框:无;右边框:100px纯红色;边框底部:50px实心透明;边框顶部:50px实心透明;}.直角三角形{边界权:无;左边框:100px纯红色;边框底部:50px实心透明;边框顶部:50px实心透明;}.三角形后:后{宽度:0;高度:0;左侧边框:5px实心透明;右边框:5px实心透明;边框底部:5px纯红色;边距:0 5px;内容:“”;显示:内联块;}.右后三角:后{边界权:无;左侧边框:5px纯蓝色;边框底部:5px实心透明;边框顶部:5px实心透明;}前三角形:前{宽度:0;高度:0;左侧边框:5px实心透明;右边框:5px实心透明;边框底部:5px纯蓝色;边距:0 5px;内容:“”;显示:内联块;}.左前三角:前{左侧边框:无;右边框:5px纯蓝色;边框底部:5px实心透明;边框顶部:5px实心透明;}<div class=“triangle”></div><div class=“triangle triangle down”></div><div class=“triangle triangle left”></div><div class=“triangle triangle right”></div><a class=“triangle before triangle after left”href=“#”>返回</a><a class=“triangle after triangle”href=“#”>下一步</a>
从基本的正方形和边框开始。每个边框将被赋予不同的颜色,以便我们可以区分它们:
.三角形{边框颜色:黄-蓝-红-绿;边框样式:实心;边框宽度:200px 200px 200px 200px;高度:0px;宽度:0px;}<div class=“triangle”></div>
这为您提供了:
但不需要顶部边框,因此将其宽度设置为0px。现在,200px的边框底部将使我们的三角形变高200px。
.三角形{边框颜色:黄-蓝-红-绿;边框样式:实心;边框宽度:0px 200px 200px;高度:0px;宽度:0px;}<div class=“triangle”></div>
我们将得到:
然后,要隐藏两个边三角形,请将边框颜色设置为透明。由于顶部边框已被有效删除,因此我们也可以将边框顶部颜色设置为透明。
.三角形{边框颜色:透明透明红色透明;边框样式:实心;边框宽度:0px 200px 200px;高度:0px;宽度:0px;}<div class=“triangle”></div>
最后我们得到了:
我知道这是一个旧的方法,但我想在讨论中补充一点,单独使用HTML和CSS创建三角形至少有5种不同的方法。
使用边框使用线性梯度使用圆锥梯度使用转换和溢出使用剪辑路径
我认为,除了方法3(使用圆锥曲线梯度)之外,这里已经介绍了所有内容,所以我将在这里分享:
.三角形{宽度:40px;高度:40px;背景:圆锥形梯度(50%50%,透明135度,绿色0,绿色225度,透明0);}<div class=“triangle”></div>
CSS三角:五幕悲剧
正如亚历克斯所说,等宽的边界以45度角相互对接:
如果没有上边框,则如下所示:
然后你给它0的宽度。。。
…高度为0。。。
…最后,使两个侧边透明:
这就形成了一个三角形。