css 圆角倾斜背景

x759pob2 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(147)

我正在尝试为div创建一个类似矩形的背景（圆角），但右角比左角低。这两个角之间的高度差必须保持相同**，与背景的总高度无关。
大概是这样：

我不知道哪种解决方案最好：一个完整的svg，或者只使用css中的clip-path。
我尝试手动创建一个svg，但结果似乎不够精确。

<svg width="500" height="200">
    <defs>
      <mask id="roundCorner">
        <rect width="100%" height="100%" fill="white"/>

        //left corner
        <rect width="50" height="50" fill="black"/>
        <circle r="50" cx="50" cy="50" fill="white"/>
        
        //right corner
        <rect x='450' y="25" width="50" height="50" fill="black"/>
        <circle r="50" cx="450" cy="76" fill="white"/>

        //line
        <path d="M50 0 L500 30 L500 0 Z" fill='black'  />
      </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="lime" mask="url(#roundCorner)"/>
  </svg>

那么我怎样才能有效地实现这样一个干净的背景呢？

css

来源：https://stackoverflow.com/questions/71778436/tilted-background-with-rounded-corners

1条答案

按热度按时间

m2xkgtsf1#

第一个你需要采取的形状在svg格式像这样。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 220">
<path fill="#4F92C2" d="M449.8,220H50c-27.6,0-50-22.4-50-50V51.5C0,23.1,23.1,0,51.5,0l403.2,44.1c25.8,2.8,45.3,24.6,45.3,50.5v75.2  C500,197.5,477.5,220,449.8,220z"/>
</svg>

接下来，你需要一个在线的svg到css的剪辑路径转换器here。在这个转换器中你有坐标点，它可以帮助你设置当扩展元素的宽度或高度时哪些部分总是相同的形状。
根据您的问题，如果高度增加，则右下角低于左下角，因此右上角坐标点金色标记在以下屏幕截图中，

将x轴值设置为“右”，以防如果宽度增加则不能拉伸，因为部分形状总是需要右侧。
将y轴值设置为“顶部”，以防高度增加而不能拉伸，该部分形状总是需要顶侧。

在上图中，剩余坐标值如下：

黑色标记-右下

x轴向“右”。
y轴指向“底部”，因为底部区域始终需要。
靛蓝色标记-左下
x轴向“左”，因为它已经在左侧。因此，不需要更改值。
y轴到“底部”。
绿色标记-左上角
x轴向“左”。
y轴设置为“top”。因此，不需要更改两个值。

最后你得到的代码如下，你改变所有的坐标值后，如果需要什么，并点击获取代码按钮.
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-20

我来回答

css 圆角倾斜背景

1条答案

相关问题

热门标签

最新问答