主页 / 问题 / 1418905
Accepted
Vadim
Asked:2022-08-10 18:30:15 +0800 CST2022-08-10 18:30:15 +0800 CST

如何布置多边形

  • 772

您需要制作一个多边形：

在此处输入图像描述

.item:nth-child(2):after {
    height: 0;
    width: 0;
    left: 242px;
    border-left: 370px solid transparent;
    border-bottom: 370px solid #212427;
    transform: translateY(-50%) rotate(-34deg);
}

我得到了这个，但这不是我需要的：

![在此处输入图像描述

html css

2 个回答

  1. Best Answer

    Zadolbaytes 边界做。

    div {
  background-color: #ccc;
  width: 350px;
  height: 350px;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  lefT: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  clip-path: polygon(317px 22px, 267px 338px, 18px 137px);
}
    <div/>

    • 1

  2. Zadolbaytes 边界做。

    ¯\_(ツ)_/¯

    body {margin: 0;}

.polygon {  
  display: inline-block;
  width: 345px;
  height: 349px;
  background-color: #999;
  position: relative;
}

.triangle {
  width: 0;
  height: 0;
  border: 160px solid transparent;
  border-top-width: 160px;
  border-bottom-color: #f00;
  border-bottom-width: 278px;
  border-top-width: 0;
  position: absolute;
  transform: rotate(39deg);
  left: 20.3%;
  top: -2.5%;
}
    <img src="//i.stack.imgur.com/rpemx.png">
<div class="polygon">
  <div class="triangle"></div>
</div>

    • 1

相关问题