Question

我正在尝试创建一个div，其顶部为三角形，其下为三角形。

div的大小应该敏感，因此宽度不能固定
也不是固定高度

已经尝试过边框，但是它们似乎并没有给我我想要的灵活宽度。

所以我在哪里：我正在使用伪元素放置由形状制成的svg！问题是，我不确定如何正确放置它们。.感到非常奇怪，不得不从顶部开始设置100％并以另一种方式放置底部（但是您可以看到中间有一条线，等等）。

这是小提琴： https://jsfiddle.net/benvanlooy/c4vqb1ay/

.box {
  position: relative;
  display: inline-block;
  width: 40%;
  background-color: #D01417;
  margin-top: 200px;
   margin-bottom: 200px;
  padding: 30px;
}

.box::before {
  content: url('http://www.benvanlooy.be/fiddle/box-triangle-top-red-new-01.svg');
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 100%;
}

.box::after {
  content: url('http://www.benvanlooy.be/fiddle/box-triangle-bottom-red-new-01.svg');
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  top: 100%;
}

<div class="box">
  this is some content
  <BR/> this
  <br/> box
  <br/> has
  <br/> a <br/> variable
  <br/> height
</div>

有人有过类似的经历吗？ :-) 答案可能很简单，所以我感到很愚蠢：/

任何帮助将不胜感激！

Answer 1

您可以使用渐变，无需复杂的代码和额外的SVG：

.box {
  position: relative;
  display: inline-block;
  width: 40%;
  background: 
    linear-gradient(to top right,#D01417 49.5%,transparent 50%) top right/50.2% 200px,
    linear-gradient(to top left,#D01417 49.5%,transparent 50%) top left/50.2% 200px,
    linear-gradient(to bottom right,#D01417 49.5%,transparent 50%) bottom right/50.2% 200px,
    linear-gradient(to bottom left,#D01417 49.5%,transparent 50%) bottom left/50.2% 200px,
    linear-gradient(#D01417,#D01417) center/100% calc(100% - 400px);  
  background-repeat:no-repeat;
  padding: 200px 30px;
}

<div class="box">
  this is some content
  <br> this
  <br> box
  <br> has
  <br> a <br> variable
  <br> height
</div>

Answer 2

这将创建不包含任何图像的可视三角形（仅使用边框）：

.box {
  position: relative;
  display: inline-block;
  width: 40%;
  background-color: #D01417;
  margin-top: 200px;
  margin-bottom: 200px;
  padding: 30px;
}

.box::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  border-width: 22px;
  border-color: transparent transparent #D01417 transparent;
  border-style: solid;
}

.box::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  border-width: 22px;
  border-color: #D01417 transparent transparent transparent;
  border-style: solid;
}

<div class="box">
  this is some content
  <BR/> this
  <br/> box
  <br/> has
  <br/> a <br/> variable
  <br/> height
</div>

Answer 3

您可以使用calc这样删除4像素的行：

.box::before {
  bottom: calc(100% - 4px);
}

https://jsfiddle.net/c4vqb1ay/33/

或

https://jsfiddle.net/c4vqb1ay/36/

Answer 4

另一种选择是在不使用伪元素或SVG的情况下裁剪实际div的形状。例如：

div {
background-color: #D01417;
  width: 40%;
  clip-path: polygon(0 3em,
                     50% 0,
                     100% 3em,
                     100% calc(100% - 3em),
                     50% 100%,
                     0 calc(100% - 3em)
                     );
  padding: 4em 1em;
}

html * {
  box-sizing: border-box;
}

<div>
this is some content<BR/>
this<br/>
box<br/>
has<br/>
a <br/>
variable<br/>
height
</div>

浏览器对clip-path的支持：https://caniuse.com/#feat=css-clip-path （如果添加了-webkit-前缀，则在Edge以外的大多数当前浏览器中都可以使用）

只需定义点即可绘制多边形：

转换为CSS形状：

0 3em,
50% 0,
100% 3em,
100% calc(100% - 3em),
50% 100%,
0 calc(100% - 3em)

（从左上方开始，但这并不重要）

如果您决定采用更复杂的形状，此工具将非常有用：https://bennettfeely.com/clippy/

如何在顶部和底部直接创建带有伪元素的div？

4 个答案: