html - 使用CSS创建形状

.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 transform属性创建那些图像（如果可能的话）。

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

最佳答案

使用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>