代码之家 › 专栏 › 技术社区 › user979331

CSS创建边到边的三角形

css

user979331 · 技术社区 · 7 年前

我用css创建了一个三角形:

.box {

width: 0;
height: 0;
border-style: solid;
border-width: 540px 964px 540px 0;
border-color: transparent #007bff transparent transparent;

}

但我想让我的三角形看起来像这样:

我的问题是如何使顶部和底部更边缘到边缘?

2 回复 | 直到 7 年前

Nenad Vracar 7 年前

你可以用 :after rotate 和 translate 变换。

.element {
  display: inline-block;
  background: lightgreen;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.two {
  margin-left: 30px;
  width: 300px;
  height: 300px;
}

.element:after {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #30373F;
  transform: rotate(45deg) translate(10%, -20%);
}

<div class="element"></div>
<div class="element two"></div>

Temani Afif 7 年前

.box {
  width:200px;
  height:200px;
  background:
    linear-gradient(red,red) right/30% 100%,
    linear-gradient(to top left,red 49.8%,transparent 50%) top left/70% 50%,
    linear-gradient(to bottom left,red 49.8%,transparent 50%) bottom left/70% 50%,
    url(https://picsum.photos/600/600?image=1069) center/cover; 
  background-repeat:no-repeat;
}