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

Question

刚才意识到我还没有看到这一点。

但不能相信这是不可能的。

我想在纯CSS / HTML中绘制一个三角形。如果可能的话，等边。

澄清：

我不想用图像来达到这个目的。

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

Answer 1

一种解决方案

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

Here is a basic example使用此代码：

CSS＆amp; 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%;
    }

<div class="triangleBorder">
    <span>Content<span>
</div>

Answer 2

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

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

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

缺点：如果body背景和shape背景不同且body背景不是纯色，则此方法无效。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

以下是选项1的变体，当body的背景和形状的背景不同且body背景为纯色。

＆＃13;

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>截图：

通过修改skew角度和父div的高度，可以轻松创建具有不同角度的三角形。但是，正如我们使用skew一样，当倾斜角接近90度（或-90度）时，边界会变得更薄，但这不应该是一个太大的问题，因为如此高的角度你几乎不适合里面的任何文字。

---

选项2：使用线性渐变

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle'>
  <span>content</span>
</div>

＆＃13;

＆＃13;

＆＃13;

缺点：已知角度渐变会产生锯齿状线条。

  

注意：无论选择哪种方法，您仍然需要进行文字换行以使文字保持在形状内。