CSS技巧-CSS的形状有很多不同的CSS形状,我特别困惑于三角形:

#三角形向上{宽度:0;高度:0;左边框:50px实心透明;右边框:50px实心透明;边框底部:100px纯红色;}<div id=“triangle up”></div>

它是如何以及为什么工作的?


当前回答

从基本的正方形和边框开始。每个边框将被赋予不同的颜色,以便我们可以区分它们:

.三角形{边框颜色:黄-蓝-红-绿;边框样式:实心;边框宽度: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>

最后我们得到了:

其他回答

不同的方法。具有线性梯度(对于IE,仅IE 10+)。您可以使用任何角度:

.三角形{边距:50px自动;宽度:100px;高度:100px;/*线性梯度*/背景:-moz线性梯度(-45deg,rgba(255,0,0,0)0%,rgba,255,0,0,50%,rgba)255,0,0,1,50%;/*FF3.6以上*/背景:-webkit渐变(线性、左上、右下、颜色停止(0%,rgba(255,0,0,0))、颜色停止器(50%,rgba)255,0,0,0))、色彩停止器(50%,rgba;/*铬,Safari4+*/背景:-webkit线性梯度(-45deg,rgba(255,0,0)0%,rgba,255,0,0,0,50%,rgba)255,0,0,1,50%;/*Chrome10+、Safari5.1+*/背景:o-linear-gradient(-45度,rgba(255,0,0)0%,rgba(2550,0,0)50%,rgba(255,00,1)50%;/*歌剧11.10+*/背景:-ms线性梯度(-45度,rgba(255,0,0)0%,rgba,255,0,0,0,50%,rgba)255,0,0,1,50%;/*即10+*/背景:线性梯度(135度,rgba(255,0,0)0%,rgba,255,0,0,0,50%,rgba)255,0,0,1,50%;/*W3C*/;}<div class=“triangle”></div>

这是jsfiddle

剪辑路径对我来说效果最好-适用于具有和不具有固定尺寸的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%);
}

考虑下面的三角形

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

这是我们得到的:

为什么会变成这样?下图解释了尺寸,注意底部边框使用了15px,左侧和右侧使用了10px。

通过删除右边框,可以很容易地创建直角三角形。

如果你想改变边框大小、宽度和高度,看看它们如何创建不同的形状,请尝试以下操作:

常量大小=[32,32,32,32];const triangle=document.getElementById('triangle');函数更新({target}){让索引=空;if(目标){index=parseInt(target.id);if(!isNaN(索引)){sizes[index]=目标值;}}window.requestAnimationFrame(()=>{triangle.style.borderWidth=sizes.map(size=>`${size}px`).join(“”);if(isNaN(索引)){triangle.style[target.id]=`${target.value}px`;}});}document.querySelectorAll('input').forEach(input=>{input.oninput=更新;});更新({});正文{边距:0;最小高度:100vh;显示:柔性;对齐内容:中心;对齐项目:居中;溢出:隐藏;}#三角形{边框样式:实心;边框颜色:黄-品红-蓝-黑;背景:青色;高度:0px;宽度:0px;}#控件{位置:固定;底部:0;左:0;右:0;背景:白色;显示:柔性;方框阴影:0 0 32px rgba(0,0,0、.125);}#控件>div{位置:相对;宽度:25%;填充:8px;框大小调整:边框框;显示:柔性;}输入{边距:0;宽度:100%;位置:相对;}<div id=“triangle”style=“border width:32px 32px 32px;”></div><div id=“controls”><div><input-type=“range”min=“0”max=“128”value=“32”id=“0”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“1”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“2”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“3”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“width”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“height”/></div></div>

更进一步,使用基于此的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>