CSS三角形是如何工作的

CSS Tricks-Shapes of CSS有很多不同的 CSS 形状,我对三角形特别困惑:

CSS Tricks - Shapes of CSS有很多不同的 CSS 形状,我对三角形特别困惑:

CSS Triangle

#-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="-up"></div>

它如何以及为什么工作?

2353

CSS 三角形:五幕中的悲剧

作为alex said,相等宽度的边界以 45 度角相互对接:

borders meet at 45 degree angles, content in middle

当你没有顶部边框时,它看起来像这样:

no top border

然后你给它一个宽度为 0...

no width

...和 0 的高度...

no height either

...最后,您使两个侧边框透明:

transparent side borders

这导致了一个三角形。

554

边框在它们相交的位置使用成角度的边(与宽度相等的边框成 45 ° 角,但更改边框宽度会使角度倾斜)。

Border example

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}
<div></div>

查看jsFiddle

通过隐藏某些边框,您可以获得三角形效果(如上所示,通过使不同部分具有不同的颜色)。transparent通常用作边缘颜色以实现三角形形状。

525

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

. {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}
<div class=""></div>

它给你this

square with four borders

但是不需要顶部边框,因此将其宽度设置为0px。现在,200px的边框底部将使我们的三角形高 200px。

. {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}
<div class=""></div>

我们将得到this

bottom half of square with four borders

然后要隐藏两个边三角形,请将 border-color 设置为 transparent。由于顶部边框已被有效删除,因此我们也可以将 border-top-color 设置为 transparent。

. {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}
<div class=""></div>

最后我们得到this

triangular bottom border

298

不同的方法:CSS3 三角形与变换旋转

使用这种技术很容易制作三角形。对于喜欢看动画解释这种技术如何工作的人来说,它是:

gif animation : how to make a  with transform rotate

链接到动画:How to make a CSS3

演示:CSS3 s用变换旋转。

否则,这里是 4 行为的详细解释(这不是悲剧)如何使一个元素的等腰直角三角形。

注 1:对于非等腰三角形和花哨的东西,您可以看到步骤 4

注 2:在以下代码片段中,不包含供应商前缀,它们包含在codepen demos中。

注 3:以下解释的 HTML 始终为:<div class="tr"></div>

步骤 1:创建一个 div

简单,只需确保width = 1.41 x height。您可以使用任何 techinque (see here),包括使用百分比和 padding-bottom 来保持纵横比,并制作一个响应三角形。在下图中,div 有一个金的边框。

在该 div 中,插入一个伪元素,并给它 100 % 的父级宽度和高度。

Making a CSS  with transform roate step 1

在这一点上,我们有这个CSS

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}
.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

步骤 2:让我们旋转

首先,最重要的是:定义一个转换原点default origin在伪元素的中心,我们需要它在左下角。通过将此CSS添加到伪元素:

transform-origin:0 100%;ortransform-origin:left bottom;

现在我们可以将伪元素顺时针旋转 45 度transform : rotate(45deg);

Creating a  with CSS3 step 2

在这一点上,我们有这个CSS

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}
.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

第 3 步:隐藏它

要隐藏伪元素的不需要的部分(用边框溢出 div 的所有内容),您只需要在容器上设置overflow:hidden;。删除边框后,您将获得...aTRIANGLE!:

DEMO

CSS

CSS:
.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}
.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

第四步:更进一步……

demo所示,您可以自定义三角形:

通过使用skewX()使它们更薄或更平坦。

通过播放变换 orign 和旋转方向,使它们指向左,右或任何其他方向。

使some reflexion具有 3D 变换属性。

Give the borders

将图像inside the

更多...释放CSS3的力量!

为什么使用这种技术?

三角形可以很容易地响应。

您可以使 with border

您可以保持三角形的边界。这意味着只有当光标为inside the 时,您才能触发悬停状态或单击事件。在this one等情况下,这可能会非常方便,因为每个三角形都无法覆盖其邻居,因此每个三角形都有自己的悬停状态。

你可以做一些fancy effects like reflections

它将帮助您了解 2d 和 3d 变换属性。

为什么不使用这种技术?

主要缺点是浏览器兼容性,IE9 + 支持 2d 转换属性,因此如果您计划支持 IE8,则不能使用此技术。有关更多信息,请参阅CanIuse。对于使用 3d 变换的一些花哨效果,如the reflection浏览器支持 IE10 +(有关更多信息,请参阅canIuse)。

你不需要任何响应,一个普通的三角形对你来说很好,那么你应该去这里解释的边框技术:更好的浏览器兼容性和更容易理解,这要归功于这里的惊人帖子。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(135)
如何私下引用/使用另一个单元中的Pascal单元
上一篇
通过 C#弹出USB设备
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(46条)