主页 / 问题 / 1574451
Accepted
ViVi
Asked:2024-04-03 14:44:00 +0000 UTC2024-04-03 14:44:00 +0000 UTC

如何使用CSS制作这样的白色圆形笔画？

  • 772

我尝试通过多边形和边界来做到这一点，但我一直遇到这样的事实：线无法圆化，并且角最终变成锥形。 在此输入图像描述

html

1 个回答

  1. Best Answer

    .container {
  width: 700px;
  height: 110px;
  background: black;
  position: relative;
}

.trapezoid {
  width: 350px;
  height: 100px;
  position: relative;
}

.trapezoid::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 0 15px 5px 0;
  transform: perspective(300px) rotateX(25deg);
  border-top: 5px solid white;
  border-right: 5px solid white;
  top: 6px;
}

.right::before {
  transform-origin: 0% 50%;
}

p {
  color: white;
  position: absolute;
  left: 220px;
  top: 20px;
}
    <div class="container">
  <div class="trapezoid right">
    <p>lorem<br> ipsum<br> dolor</p>
  </div>
  <div>

    当然，不完全相同...但视觉上相似...但是，底部的斜角与原来的略有不同...您需要使用较小的边框半径但是，如果可以使用svg，那么 svg 更好

    • 1

相关问题