主页 / 问题 / 1034031
Accepted
daladn0
Asked:2020-10-13 03:31:35 +0800 CST2020-10-13 03:31:35 +0800 CST

CSS中的几何形状

  • 772

Shalom，这是我需要铆接的屏幕截图： 在此处输入图像描述

具体来说，左上角的一个三角形。如何创建一个并将其放置在需要的地方，我知道，但是如何将左上角圆化以使第 4 个角不出现，以及如何在此三角形中放置文本以使它旋转了 45 度 唉。我知道您不能要求代替自己做某事，但是我在互联网上没有找到任何信息，我提前道歉

css

1 个回答

  1. Best Answer

    body {
  background: #ccc;
}

.container {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  width: 200px;
  text-align: center;
  padding: 100px 0;
  position: relative;
}

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
  position: absolute;
  left: 0;
  top: 0;
}

.triangle-text {
  position: absolute;
  top: -78px;
  left: -4px;
  width: 70px;
  transform: rotate(-45deg);
}
    <div class="container">
  <div class="triangle">
    <span class="triangle-text">popular</span>
  </div>
  sdasdas
</div>

    • 3

相关问题