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)。

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

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

(59)
什么是虚拟方法 (virtual function in c#)
上一篇
列表 元组 集合和字典之间有什么区别 (compare list tuple set and dictionary in pyt
下一篇

相关推荐

  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 31 96
  • css超出隐藏省略:爱上海,一个充满活力的城市!

    css超出隐藏省略,可以使用CSS的text-属性来实现,具体代码如下:…

    2023-06-26 11:29:04
    0 71 62
  • css怎么让图片居中显示:使用CSS实现图片居中显示

    示例示例可以使用CSS的margin属性来实现图片居中显示,代码示例如下:上面的代码中,我们使用了 `margin: 0 auto;` 来让图片居中显示,其中`0`表示上下边距,`auto`表示左右边距自动调整,这样就可以让图片居中显示。…

    2023-06-26 00:45:20
    0 51 18
  • css 背景铺满:欢迎来到我的世界

    CSS 代码如下:上面的代码可以使背景图片填充整个浏览器窗口,并且保持图片的原始比例。…

    2023-10-11 10:49:49
    0 68 68
  • css 子样式:标题

    CSS 子样式是指在父样式的基础上,对其子元素进行单独定义的样式。它可以使用类选择器、ID 选择器或者属性选择器来定义,如下所示:…

    2023-04-13 14:42:51
    0 85 78
  • css 间隔:如何利用 CSS 进行间隔调整

    示例示例CSS 间隔是指在 CSS 中使用的间距属性,它可以用来设置元素之间的距离。有几种常用的 CSS 间隔属性,包括:…

    2023-06-05 02:47:09
    0 51 41
  • css导入字体:标题

    示例示例CSS导入字体可以通过@font-face规则来实现,代码示例如下:…

    2023-04-22 12:42:42
    0 44 29
  • cssci与sci的区别比较两者在科学研究中的作用

    CSSCI(中国社会科学引文索引)是中国社会科学院出版社编辑的中国社会科学文献引文索引,收录中国社会科学领域的期刊文献及其他文献,主要收录中国社会科学领域的期刊文献,也收录部分论文集、学位论文及其他文献。…

    2023-11-15 05:05:39
    0 23 41

发表评论

登录 后才能评论

评论列表(87条)