那些遇到过的问题

HTML/CSS中是否可以使用对角线？

4 html css css3 css-shapes

刚刚意识到我还没有看到这个.

但不敢相信这是不可能的.

我想用纯CSS/HTML绘制一个三角形.如果可能的话,是等边的.

澄清:

我不希望使用图像来实现这一目标.

您需要能够将内容放入div中.

Sco*_*ttS 6

一解决方案

对角线并不容易.假设您正在处理纯色背景颜色,一种解决方案是覆盖伪元素以创建边框.然后你必须定位内容,使它看起来不错.你甚至可以做一些文字包装.

以下是使用此代码的基本示例:

CSS和HTML分别

.triangleBorder {
        position: relative;
        width: 200px;
        height: 173.2px; /* for equalateral = Width * (sq.root 3) / 2 */
    }
    
    .triangleBorder:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        z-index: -2;
        border: 100px solid transparent;
        border-top-width: 0;
        border-bottom: 173.2px solid black;
    }
    
    .triangleBorder:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        left: 1px;
        top: 1px;
        z-index: -1;
        border: 99px solid transparent;
        border-top-width: 0;
        border-bottom: 171.5px solid white;
    }
    
    .triangleBorder span {
       position: absolute;
       width: 100%;
       text-align: center;
       top: 50%;
    }
Run Code Online (Sandbox Code Playgroud) 
<div class="triangleBorder">
    <span>Content<span>
</div>
Run Code Online (Sandbox Code Playgroud)

Har*_*rry 5

以下是使用 CSS 创建等边三角形的几种不同方法。创建对角线仍然不是一件容易的事，但现在即使身体具有渐变（或）图像作为其背景，形状也至少可以具有透明背景。

选项 1：使用伪元素和偏斜变换

在这种方法中，我们使用几个伪元素并将它们向相反方向（向内）倾斜以创建对角线，而底部的线是使用border-bottom父元素上的a 生成的。我们也可以使用这种方法生成梯形。

缺点：如果body背景和shape背景不同并且body背景不是纯色，这种方法将不起作用。

.triangle {
  position: relative;
  width: 200px;
  border-bottom: 2px solid white;
  color: white;
  margin: 20px auto;
  overflow: hidden;
}
.shape1 {
  height: 174px;
}
.shape2 {
  height: 101px;
}
.triangle:before,
.triangle:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 0%;
  bottom: 0px;
  transform-origin: left bottom;
}
.triangle:before {
  left: 0px;
  border-right: 2px solid white;
}
.triangle.shape1:before {
  transform: skew(-30deg);
}
.triangle.shape2:before {
  transform: skew(-45deg);
}
.triangle:after {
  right: 0px;
  border-left: 2px solid white;
}
.triangle.shape1:after {
  transform: skew(30deg);
}
.triangle.shape2:after {
  transform: skew(45deg);
}
.triangle span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
}

/* Just for demo */

*{
  box-sizing: border-box;
}

body {
  background: radial-gradient(ellipse at center, #400, #100);
}
.trapezoid {
  position: relative;
  border-bottom: 2px solid white;
  color: white;
  margin: 20px auto;
  width: 200px;
  height: 50px;
}
.trapezoid:before,
.trapezoid:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 40%;
  bottom: -1px;
  border-top: 2px solid white;
  transform-origin: left bottom;
}
.trapezoid:before {
  left: 0px;
  border-left: 2px solid white;
  transform: skew(-45deg);
}
.trapezoid:after {
  right: 0px;
  border-right: 2px solid white;
  transform: skew(45deg);
}
.trapezoid span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 30%;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class='triangle shape1'>
  <span>content</span>
</div>
<div class='triangle shape2'>
  <span>content</span>
</div>

<br/>


<!-- Just something extra to illustrate -->

<div class='trapezoid'>
  <span>content</span>
</div>

<br/>
Run Code Online (Sandbox Code Playgroud)

这是选项 1的变体，当body和形状的body背景不同并且背景是纯色时，它会起作用。

.triangle{
  position: relative;
  width: 200px;  
  border-bottom: 2px solid black;
  color: red;
  background: beige;
  margin: 20px auto;
  overflow: hidden;
}
.shape1{
  height: 174px;
}
.shape2{
  height: 101px;
}
.triangle:before, .triangle:after{
  position: absolute;
  content: '';
  height: 101%;
  width: 100%;
  bottom: 0px;
  background: red;
  transform-origin: left bottom;
}
.triangle:before{
  left: -200px;
  border-right: 2px solid black;
}
.triangle.shape1:before{
  transform: skew(-30deg);  
}
.triangle.shape2:before{
  transform: skew(-45deg);  
}
.triangle:after{
  right: -200px;  
  border-left: 2px solid black;
}
.triangle.shape1:after{
  transform: skew(30deg);
}
.triangle.shape2:after{
  transform: skew(45deg);
}

.triangle span{
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
}

/* Just for demo */

*{
  box-sizing: border-box;
}
body{
  background: red;  
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle shape1'>
  <span>content</span>
</div>
<div class='triangle shape2'>
  <span>content</span>
</div>
Run Code Online (Sandbox Code Playgroud)

这是选项 1 的另一种变体，它支持三角形内外的渐变背景。

.triangle {
  position: relative;
  width: 200px;
  border-bottom: 2px solid white;
  color: white;
  margin: 20px auto;
  overflow: hidden;
}
.shape1 {
  height: 174px;
}
.shape2 {
  height: 101px;
}
.triangle:before,
.triangle:after {
  position: absolute;
  content: '';
  height: 99%;
  width: 50%;
  z-index: -1;
  transform-origin: left bottom;
}
.triangle:before {
  left: 0px;
  top: 100%;
  border-top: 3px solid white;
  background: linear-gradient(90deg, #003333, #773333);
}
.triangle.shape1:before {
  border-top: 4px solid white;
  transform: skewY(-60deg);
}
.triangle.shape2:before {
  transform: skewY(-45deg);
}
.triangle:after {
  right: 0px;
  top: 0%;
  border-top: 3px solid white;
  background: linear-gradient(90deg, #773333, #FF3333);
}
.triangle.shape1:after {
  border-top: 4px solid white;
  transform: skewY(60deg);
}
.triangle.shape2:after {
  transform: skewY(45deg);
}
.triangle span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
}


/* Just for demo */

*{
  box-sizing: border-box;
}
body {
  background: radial-gradient(ellipse at center, #400, #100);
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle shape1'>
  <span>content</span>
</div>
<div class='triangle shape2'>
  <span>content</span>
</div>
Run Code Online (Sandbox Code Playgroud)

截屏：

在此处输入图片说明

通过修改skewparent的角度和高度，可以轻松创建具有不同角度的三角形div。但是，当我们使用时skew，随着倾斜角度接近 90 度（或 -90 度），边框往往会变得更薄，但这应该不是什么大问题，因为在如此高的角度下，您几乎无法将任何文本放入其中。

选项 2：使用线性渐变

在这种方法中，我们使用了几个有角度的linear-gradient背景（每个背景都是容器宽度的 50%）并将它们向相反的方向倾斜以产生对角线。

.triangle {
  position: relative;
  border-bottom: 2px solid white;
  color: white;
  margin: 20px auto;
  height: 174px;
  width: 200px;
  background: linear-gradient(to top left, transparent 49.5%, white 49.5%, white 50.5%, transparent 50.5%), linear-gradient(to top right, transparent 49.5%, white 49.5%, white 50.5%, transparent 50.5%);
  background-size: 50% 100%;
  background-position: 1px 0px, 99px 0px;
  background-repeat: no-repeat;
}
.triangle span {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
}
/* Just for demo*/

body {
  background: radial-gradient(ellipse at center, #400, #100);
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle'>
  <span>content</span>
</div>
Run Code Online (Sandbox Code Playgroud)

缺点：倾斜渐变以产生锯齿状线条而闻名。

注意：无论选择哪种方法，您仍然必须进行文本换行以使文本保留在形状内。

归档时间：

查看次数：

17467 次

最近记录：

10 年，6 月 前
CSS(3)和HTML剪切边缘 5
更多相关链接
相关归档
使用css隐藏文本 296
优化(移动)浏览器中用于CSS3 HW GPU加速的基于SVG的精灵表 35
下拉列表中的keydown事件 21
使用时锚定<a>标签在chrome中不起作用# 21
如何检测CSS过滤器？ 16
为什么简单的flexbox居中代码在safari 5和6中不起作用？ 8
CSS 3:文本轮换错误？ 7
围绕所有内容的div的背景颜色 5
如何使用css first-child:not() 5
边界不透明且具有线性渐变 2
难疑归档
如何让Git使用我选择的编辑器进行提交？ 2362
如何逐行读取文件到列表中？ 2028
如何在Ruby中编写switch语句 2026
我怎样才能找到带有Mathematica的Waldo？ 1538
如何递归计算目录中的所有代码行？ 1536
从已从磁盘中删除的Git存储库中删除多个文件 1294
在Python中将整数转换为字符串？ 1282
如何在SQL中使用JOIN执行UPDATE语句？ 1262
命名类 - 如何避免将所有内容称为"<WhatEver> Manager"？ 1147
参考 - 这个错误在PHP中意味着什么？ 1071