html - 使用 CSS 创建形状

Question

.shape {
    width: 200px;
    height: 50px;
    background-color: green;
    border-radius: 10px 10px 0 30px;
    transform: skewX(0);
}

<div class="shape">Hello World!</div>

我们有以下两个 jpg 格式的形状。但在某些情况下背景和边框颜色需要更改为某种不同的颜色。所以想法是使用 CSS 变换属性创建这些图像(如果可能的话)。

{   width: 200px;
    height: 50px;
    background-color: green;
    border-radius: 10px 10px 0 30px;
    transform: skewX(0);
}

Answer 1

使用 SVG

.a {
  fill: #ef0c4d;
  stroke: #999;
  stroke-miterlimit: 10;
  stroke-width: 7px;
}

.a:hover {
  fill: green;
  stroke: blue;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680.4 240.3">
<path class="a" d="M135,113.1s7.7,123.6,13.5,164.4c6.3,44.5,13,64,168,64h490L737.7,184.3a5.6,5.6,0,0,0-4.2-3.2L140.1,108.2A4.5,4.5,0,0,0,135,113.1Z" transform="translate(-131.4 -104.7)"/>
</svg>

---

使用CSS

.rect {
    width: 230px;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.rect:before {
  content: " ";
    position: absolute;
    width: 200px;
    height: 50px;
    background: #dedede;
    border-bottom-left-radius: 26px;
    right: 30px;
    bottom: 0;
}

.rect:after {
  content: " ";
    position: absolute;
    width: 250px;
    height: 50px;
    background: #dedede;
    transform: rotate(10deg) skew(30deg);
    bottom: 20px;
    left: -38px;
}

<div class="rect"></div>