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

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

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


当前回答

这里是我为演示而创建的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>

其他回答

这是一个老问题,但我认为值得分享如何使用这种三角形技术创建箭头。

步骤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/

边框在相交处使用有角度的边(与等宽边框成45°角,但更改边框宽度可能会扭曲角度)。

第二部分{宽度:60px;边框宽度:30px;边框颜色:红蓝绿黄;边框样式:实心;}<div></div>

看看jsFiddle。

通过隐藏某些边界,您可以获得三角形效果(正如您在上面看到的,通过使不同部分的颜色不同)。透明经常被用作边缘颜色以获得三角形形状。

好的,这个三角形将被创建,因为元素的边框在HTML和CSS中一起工作的方式。。。

由于我们通常使用1或2px边框,我们从未注意到边框以相同的宽度彼此成45°角,如果宽度发生变化,角度也会发生变化,请运行我在下面创建的CSS代码:

.三角形{宽度:100px;高度:100px;左边框:50px实心黑色;右边框:50px实心黑色;边框底部:100px纯红色;}<div class=“triangle”></div>

然后在下一步中,我们没有任何宽度或高度,如下所示:

.三角形{宽度:0;高度:0;左边框:50px实心黑色;右边框:50px实心黑色;边框底部:100px纯红色;}<div class=“triangle”></div>

现在,我们使左边界和右边界不可见,以使理想的三角形如下所示:

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

如果您不愿意运行代码片段来查看步骤,我创建了一个图像序列,以查看一个图像中的所有步骤:

其他人已经很好地解释了这一点。让我给你一个动画,它将快速解释这一点:http://codepen.io/chriscoyier/pen/lotjh

这里有一些代码供您使用和学习这些概念。

HTML格式:

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

CSS:

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

玩这个,看看会发生什么。将高度和宽度设置为零。然后移除顶部边框并使左右透明,或者只需查看下面的代码以创建css三角形:

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

我知道这是一个旧的方法,但我想在讨论中补充一点,单独使用HTML和CSS创建三角形至少有5种不同的方法。

使用边框使用线性梯度使用圆锥梯度使用转换和溢出使用剪辑路径

我认为,除了方法3(使用圆锥曲线梯度)之外,这里已经介绍了所有内容,所以我将在这里分享:

.三角形{宽度:40px;高度:40px;背景:圆锥形梯度(50%50%,透明135度,绿色0,绿色225度,透明0);}<div class=“triangle”></div>