如何使用 css 和 html 创建半正方形和弯曲形状的形状
P粉797004644
P粉797004644 2024-02-25 19:57:15
0
2
468

我正在尝试绘制一个与下图中给出的形状完全相同的形状

这是我的 html 和 css 代码,它的形状与此有点相似,但在单色中我不知道如何在多色中做到这一点。谁能解释一下我该怎么做。提前致谢。

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: #FFA6DF;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 0;
}
<div class="right-angle-triangle-semicircle"></div>

P粉797004644
P粉797004644

全部回复(2)
P粉808697471

只需使用background:线性渐变

在这里您可以查看有关 线性- 的文档渐变

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: #FFA6DF;
 background: linear-gradient(-45deg, #f0f0f0 0%, #f0f0f0 50%, #FFA6DF 50%, #FFA6DF 100%);
  
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 0;
}
P粉238433862

仅使用单个元素,您可以使用一些 CSS 小技巧来实现此目的。

没有魔法数字,并且也适用于不同的元素大小调整。

此外,您可以将所有边框半径声明跳过到一行中。

边框半径:0 0 50% 0;

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: lightgray;
  border-radius: 0 0 50% 0;
  overflow: hidden;
  position: relative;
}

.right-angle-triangle-semicircle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #FFA6DF;
  width: 200%;
  transform: rotate(-45deg);
  transform-origin: bottom left;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板