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 和 变换属性。

为什么不使用这种技术?

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

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

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

(540)
如何将VB项目转换为C# 项目
上一篇
如何在不使用excel互操作库的情况下将excel工作簿转换为 pdf
下一篇

相关推荐

  • css disabled属性禁用 HTML 元素

    CSS disabled属性是一个布尔值属性,用于指定元素是否处于禁用状态。当元素处于禁用状态时,它将不会接受任何用户输入,并且通常会以某种方式显示出来(例如,颜色变淡)。…

    2023-12-17 16:07:26
    0 36 10
  • css画一个圆:圆形的美丽

    使用css画一个圆,可以使用`border-radius`属性:上面的代码将会创建一个宽度和高度都是200px的圆形div。…

    2023-06-03 12:24:22
    0 20 81
  • css字间距怎么设置:标题

    示例示例CSS中字间距是指文本中每个字符之间的距离。可以使用CSS中的`letter-spacing`属性来设置字间距。代码示例:…

    2023-10-06 11:53:52
    0 61 21
  • css详细教程:CSS Tutorial

    CSS(Cascading Style Sheets)是用来控制网页的样式表。它可以让你改变文字的大小,颜色,字体,对齐方式,背景图片,布局等等。…

    2023-07-03 01:58:25
    0 33 28
  • html5和css3的新特性:Welcome to the Future of Web Design!

    示例示例HTML5新特性(新的语义元素…

    2023-05-20 12:24:46
    0 11 25
  • css 背景色 透明:Let Your True Colors Shine Through!

    示例示例CSS 背景色透明可以使用 rgba 函数来实现,其中 a 代表 alpha 通道,取值范围为 0-1,0 代表完全透明,代表完全不透明。示例代码:…

    2023-06-22 06:58:38
    0 25 22
  • html css引用:这是一个标题

    示例示例HTML CSS引用是指在HTML文件中通过标签引用CSS文件,使HTML文件能够使用CSS文件中的样式设置来控制其外观。代码示例:…

    2023-06-04 14:35:55
    0 65 85
  • css底部对齐:Welcome to Our Website

    示例示例css底部对齐指的是将多个元素的底部对齐,使用CSS实现底部对齐可以使用flex布局。代码示例:…

    2023-05-01 13:46:07
    0 31 63

发表评论

登录 后才能评论

评论列表(39条)