CSS边对边创建三角形

Question

我使用css这样创建了一个三角形：

values: Map[String, String]

但是我试图使三角形看起来像这样：

我的问题是如何使顶部和底部的边缘更多？

Answer 1

您可以使用Glide.with(mContext).load(response.body().getMediaDetails().getSizes().getThumbnail().getSourceUrl()) .into(imageView); 伪元素创建一个正方形，然后使用: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%);
}

Answer 2

您可以使用渐变轻松地做到这一点：

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

<div class="box">
</div>