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>
它是如何以及为什么工作的?
当前回答
如果您想将边框应用于三角形,请阅读以下内容:使用CSS创建三角形?
几乎所有的答案都集中在使用边界构建的三角形上,所以我将详细介绍线性梯度方法(从@lima_fil的答案开始)。
使用像45°这样的度数值将迫使我们遵守特定的高度/宽度比,以获得我们想要的三角形,这不会是响应性的:
.tri三{宽度:100px;高度:100px;背景:线性梯度(45度,透明49.5%,红色50%);/*为了说明*/边框:1px实心;}很好<div class=“tri”></div>坏的一个<div class=“tri”style=“width:150px”></div>坏的一个<div class=“tri”style=“height:30px”></div>
相反,我们应该考虑预定义的方向值,如底部、顶部等。在这种情况下,我们可以获得任何类型的三角形,同时保持其响应。
1) 矩形三角形
为了获得这样的三角形,我们需要一个线性梯度和一个对角线方向,如从右下角、从左上角、从右下等
三-1,三-2{显示:内联块;宽度:100px;高度:100px;背景:线性渐变(到左下角,透明49.5%,红色50%);边框:1px实心;动画:更改2s线性无限交替;}.三-2{背景:线性渐变(到右上角,透明49.5%,红色50%);边框:无;}@关键帧更改{来自{宽度:100px;高度:100px;}至{高度:50px;宽度:180px;}}<div class=“tri-1”></div><div class=“tri-2”></div>
2) 等腰三角形
对于这一个,我们将需要2个像上面一样的线性梯度,每个梯度将占宽度(或高度)的一半。就像我们创建了第一个三角形的镜像。
.tri三{显示:内联块;宽度:100px;高度:100px;背景图像:线性梯度(至右下角,透明49.5%,红色50%),线性梯度(至左下方,透明49.5%,红色50%);背景大小:50.3%100%;/*我使用一个略大于50%的值,以避免两个梯度之间的小间隙*/背景位置:左、右;背景重复:无重复;动画:更改2s线性无限交替;}@关键帧更改{来自{宽度:100px;高度:100px;}至{高度:50px;宽度:180px;}}<div class=“tri”></div>
3) 等边三角形
这个处理起来有点棘手,因为我们需要保持渐变的高度和宽度之间的关系。我们将使用与上述相同的三角形,但为了将等腰三角形转换为等边三角形,我们将使计算更加复杂。
为了方便起见,我们将考虑到div的宽度是已知的,并且高度足够大,可以在内部绘制三角形(height>=width)。
我们有两个梯度g1和g2,蓝色线是divw的宽度,每个梯度都有50%的宽度(w/2),三角形的每一边都等于w。绿色线是两个梯度hg的高度,我们可以很容易地得到以下公式:
(w/2)²+hg²=w²--->hg=(sqrt(3)/2)*w--->hg=0.866*w
我们可以依靠calc()进行计算并获得所需的结果:
.tri三{--w: 100像素;宽度:var(--w);高度:100px;显示:内联块;背景图像:线性梯度(至右下角,透明49.5%,红色50%),线性梯度(至左下方,透明49.5%,红色50%);背景大小:calc(var(--w)/2+0.5px)calc(0.866*var(--w));背景位置:左下、右下;背景重复:无重复;}<div class=“tri”></div><div class=“tri”style=“--w:80px”></div><div class=“tri”style=“--w:50px”></div>
另一种方法是控制div的高度,并保持渐变的语法简单:
.tri三{--w: 100像素;宽度:var(--w);高度:计算值(0.866*var(--w));显示:内联块;背景:线性梯度(至右下,透明49.8%,红色50%)向左,线性梯度(至左下,透明49.8%,红色50%);背景尺寸:50.2%100%;背景重复:无重复;}<div class=“tri”></div><div class=“tri”style=“--w:80px”></div><div class=“tri”style=“--w:50px”></div>
4) 随机三角形
要获得一个随机三角形,很容易,因为我们只需要删除每个三角形的50%的条件,但我们应该保持两个条件(两个条件都应该具有相同的高度,两个宽度的总和应该是100%)。
.三-1{宽度:100px;高度:100px;显示:内联块;背景图像:线性梯度(至右下角,透明50%,红色0),线性梯度(至左下角,透明50%,红色0);背景尺寸:20%60%,80%-60%;背景位置:左下、右下;背景重复:无重复;}<div class=“tri-1”></div>
但如果我们想为每一侧定义一个值呢?我们只需要再次计算!
让我们将hg1和hg2定义为渐变的高度(两者都等于红线),然后将wg1和wg2定义为梯度的宽度(wg1+wg2=a)。我不会详细说明计算,但在最后我们将得到:
wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)
现在我们已经达到了CSS的极限,因为即使使用calc(),我们也无法实现这一点,所以我们只需要手动收集最终结果并将其作为固定大小使用:
.tri三{--wg1:20px;--wg2:60px;--汞:30像素;宽度:calc(var(--wg1)+var(--wg2));高度:100px;显示:内联块;背景图像:线性梯度(至右下角,透明49.5%,红色50%),线性梯度(至左下方,透明49.5%,红色50%);背景大小:var(--wg1)var(--hg),var(--wg2)var(-hg);背景位置:左下、右下;背景重复:无重复;}<div class=“tri”></div><div class=“tri”style=“--wg1:80px;--wg2:60px;--hg:100px;”></div>
奖金
我们不应该忘记,我们也可以应用旋转和/或倾斜,我们有更多的选择来获得更多的三角形:
.tri三{--wg1:20px;--wg2:60px;--汞:30像素;宽度:calc(var(--wg1)+var(--wg2)-0.5px);高度:100px;显示:内联块;背景图像:线性梯度(至右下角,透明49%,红色50%),线性梯度(至左下角,透明49%,红色50%);背景大小:var(--wg1)var(--hg),var(--wg2)var(-hg);背景位置:左下、右下;背景重复:无重复;}<div class=“tri”></div><div class=“tri”style=“transform:偏斜Y(25deg)”></div><div class=“tri”style=“--wg1:80px;--wg2:60px;--hg:100px;”></div><div class=“tri”style=“--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)”></div>
当然,我们应该记住SVG解决方案,它在某些情况下更适合:
svg公司{宽度:100px;高度:100px;}多边形{填充:红色;}<svg viewBox=“0 0 100 100”><多边形点=“0100 0,0 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“0100 50,0 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“0100 50,23 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“20,60 50,43 80100”/></svg>
其他回答
假设我们有以下div:
<div id="triangle" />
现在逐步编辑CSS,这样您就可以清楚地了解周围发生了什么
步骤1:JSfiddle链接:
#triangle {
background: purple;
width :150px;
height:150PX;
border-left: 50px solid black ;
border-right: 50px solid black;
border-bottom: 50px solid black;
border-top: 50px solid black;
}
这是一个简单的div,带有非常简单的CSS。所以外行人可以理解。Div的尺寸为150 x 150像素,边框为50像素。图像附于:
步骤2:JSfiddle链接:
#triangle {
background: purple;
width :150px;
height:150PX;
border-left: 50px solid yellow ;
border-right: 50px solid green;
border-bottom: 50px solid red;
border-top: 50px solid blue;
}
现在我刚刚更改了所有4个边的边框颜色。图像已附加。
步骤:3 JSfiddle链接:
#triangle {
background: purple;
width :0;
height:0;
border-left: 50px solid yellow ;
border-right: 50px solid green;
border-bottom: 50px solid red;
border-top: 50px solid blue;
}
现在我刚刚将div的高度和宽度从150像素更改为零。图像已附加
第4步:JSfiddle:
#triangle {
background: purple;
width :0px;
height:0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-top: 50px solid transparent;
}
现在,我已经使所有边界都透明,除了底部边界。图像附在下面。
第5步:JSfiddle链接:
#triangle {
background: white;
width :0px;
height:0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-top: 50px solid transparent;
}
现在我把背景色改成了白色。图像已附加。
因此,我们得到了所需的三角形。
这里是我为演示而创建的JSFiddle动画。
另请参见下面的代码段。
这是一个由Screencast制作的动画GIF
变换=[{'border-left-width':'30','margin-left':'70'},{'婴儿-婴儿宽度':'80'},{'右-右宽度‘:‘30’},{“订单到页面宽度”:“0”,“页边空白”:“70”},{'宽度':“0”},{“高度”:“0”,“页边空白”:“120”},{'orderLeftColor':'transparent'},{'OrderRightColor':'透明'}];$('#a').click(function(){$('.border').ctrigger(“click”);});(函数($){var持续时间=1000$('.border').click(function){对于(var i=0;i<transforms.length;i++){$(这个).animate(变换[i],持续时间)}}).end()}(jQuery)).边框{边距:20px 50px;宽度:50px;高度:50px;边框宽度:50px;边框样式:实心;边框顶部颜色:绿色;边框右侧颜色:黄色;边框底部颜色:红色;边框左侧颜色:蓝色;光标:指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>
随机版本
/***将数组元素顺序随机化。*使用Durstenfeld洗牌算法。*/函数shuffleArray(数组){对于(var i=array.length-1;i>0;i-){var j=数学地板(数学随机()*(i+1));var temp=数组[i];array[i]=array[j];array[j]=温度;}返回数组;}变换=[{'border-left-width':'30','margin-left':'70'},{'婴儿-婴儿宽度':'80'},{'右-右宽度‘:‘30’},{“订单到页面宽度”:“0”,“页边空白”:“70”},{'宽度':“0”},{“高度”:“0”},{'orderLeftColor':'transparent'},{'OrderRightColor':'透明'}];transforms=shuffleArray(变换)$('#a').click(function(){$('.border').ctrigger(“click”);});(函数($){var持续时间=1000$('.border').click(function){对于(var i=0;i<transforms.length;i++){$(这个).animate(变换[i],持续时间)}}).end()}(jQuery)).边框{边距:50px;宽度:50px;高度:50px;边框宽度:50px;边框样式:实心;边框顶部颜色:绿色;边框右侧颜色:黄色;边框底部颜色:红色;边框左侧颜色:蓝色;光标:指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>
一次性版本
$('#a').click(function(){$('.border').ctrigger(“click”);});(函数($){var持续时间=1000$('.border').click(function){$(这个).animate({'顺序到宽度':0,'边框左宽度':30,'右边框宽度':30,'边框底部宽度':80,'width':0,“高度”:0,'左边距':100,'页边空白':150,'borderTopColor':'透明','borderRightColor':'透明',“borderLeftColor”:“transparent”},持续时间)}).end()}(jQuery)).边框{边距:50px;宽度:50px;高度:50px;边框宽度:50px;边框样式:实心;边框顶部颜色:绿色;边框右侧颜色:黄色;边框底部颜色:红色;边框左侧颜色:蓝色;光标:指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>
剪辑路径对我来说效果最好-适用于具有和不具有固定尺寸的div/容器:
.triangleContainer{
position: relative;
width: 500px;
height: 500px;
}
.triangleContainer::before{
content: "";
position: absolute;
background:blue;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
更进一步,使用基于此的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>
在阅读了这里的其他答案后,我发现对于CSS三角形的工作方式有很多很好的解释。我认为这是一种技巧,而不是一种可以通用的技巧。
为了便于阅读和维护,我建议您在SVG中定义几何图形。
然后,可以通过添加data:image/SVG+xml,前缀,使用data-uri转换SVG。作为一个数据uri,它现在可以用作CSS中的背景图像。因为SVG是纯文本的,所以您可以很容易地对几何图形、笔划和填充颜色进行更新。
第三节{宽度:100px;高度:100px;显示:内联块;背景图像:url('data:image/svg+xml,<svg xmlns=“http://www.w3.org/2000/svg“viewBox=”0 0 32 32“><path fill=”red“d=”M31.345 29H1.655L16.5 1.96z“/></svg>');}<div><div class=“tri”></div><div class=“tri”></div><div class=“tri”></div></div>