4

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

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

我正在寻找用纯 CSS/HTML 绘制一个三角形。如果可能的话，是等边的。

澄清：

我不希望使用图像来实现这一点。

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

4

2 回答 2

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%;
    }
<div class="triangleBorder">
    <span>Content<span>
</div>

于 2013-03-23T02:37:09.687 回答
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%;
}
<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/>

这是选项 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;  
}
<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>

这是选项 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);
}
<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>

截屏：

在此处输入图像描述

skew通过修改parent 的角度和高度可以轻松创建具有不同角度的三角形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);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='triangle'>
  <span>content</span>
</div>

缺点：有角度的渐变以产生锯齿状线条而闻名。

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

于 2015-02-01T13:25:59.590 回答