css 具有曲线边的剪裁路径多边形

nqwrtyyt 于 2023-03-14 发布在其他

关注(0)|答案(3)|浏览(122)

目标就是实现这一点。

我到这里。

如何弯曲底部边缘？任何帮助都是感激的。

div class="curved-message"/>

.curved-message{
    background: 'lightblue';
    clip-path: polygon(0% -20%, 100% 0%, 100% 90%, 56% 90%, 52% 100%, 48% 90%, 0% 90%);
    border-radius: 25px;
    margin-top: 250px;
    height: 345px;
    border-top: 4px solid white;
    border-left: 4px solid white;
    border-right: 4px solid white;
    max-width:750px;
}

css

来源：https://stackoverflow.com/questions/46417361/clip-path-polygon-with-curve-edges

3条答案

按热度按时间

mrphzbgm1#

也许还有别的办法？

.curved-message {
  position: relative;
  width: 300px;
  height: 100px;
  background: lightblue;
  border-radius: 15px;
}
.curved-message:before {
  content: "";
  width: 30px;
  height: 30px;
  background: lightblue;
  position: absolute;
  bottom: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
}

<div class="curved-message">

</div>

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

tjjdgumg2#

此处为良好的多边形裁剪路径生成器http://bennettfeely.com/clippy/

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

好的手册在这里https://css-tricks.com/clipping-masking-css/

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

7jmck4yq3#

目标是要实现的。简单的多边形是在svg格式

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  x="0px" y="0px" viewBox="0 0 1072.7 384" xml:space="preserve">
<style type="text/css">
    .polygon_msg{fill:#ADD8E6;}
</style>
<path class="polygon_msg" d="M1072.7,25v295c0,13.8-11.2,25-25,25H558.9l-11,19l-11.5,20l-11.5-20l-11-19H25c-13.8,0-25-11.2-25-25V25  C0,11.2,11.2,0,25,0h1022.7C1061.5,0,1072.7,11.2,1072.7,25z"/>
</svg>

然后使用在线剪辑路径generator将svg路径转换为具有响应宽度和高度的css剪辑路径。
x一个一个一个一个x一个一个二个x

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

我来回答

css 具有曲线边的剪裁路径多边形

3条答案

相关问题

热门标签

最新问答