css用于从带有border-radius的底角裁剪路径

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

关注(0)|答案(2)|浏览(195)

我正在为制作figma设计的精确克隆的UI工作，我需要创建一个两边都有边界半径的部分，但它不适合我。下面是figma设计https://www.figma.com/file/nvsrIWnKXgpDmlsExz8g8s/3-diferent-landings?node-id=178%3A2

下面是我实现https://sarthakbusiness.devemr.growthemr.com/service/g99landingpage3设计的URL
下面是它的代码

.header {
    position: relative;
    padding-top: 130px;
    padding-right: 0px;
    padding-bottom: 175px;
    padding-left: 0px;
    z-index: 99;
}
.header::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgb(27, 21, 37);
    clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 85%);
    border-bottom-right-radius: 70px;
    border-bottom-left-radius: 70px;
    z-index: -99;
}

<div class="header">
    <div class="orange-dot"></div>
    <div class="blue-dot"></div>
    <div class="header-content">
</div>

有没有一种方法来实现它而不用它在背景图像。任何帮助将不胜感激

css

来源：https://stackoverflow.com/questions/71797190/css-for-cliping-the-path-from-bottom-corners-with-border-radius

2条答案

按热度按时间

lymnna711#

使用带框形阴影的倾斜变换就可以做到这一点

.container {
  height:300px;
  overflow:hidden;
  position:relative;
  z-index:0;
}
.container:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-100px 0 10px 10px;
  transform-origin:right;
  transform:skewY(10deg);
  background:blue;
  border-radius:30px;
  box-shadow: -10px 10px  orange;
}

<div class="container"></div>

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

m528fe3b2#

需要多个css剪辑路径，我们可以在我们的页面上做精确的figma多边形设计克隆。所以把两个多边形分别在svg格式。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 722 579.1" xml:space="preserve">
<style type="text/css">
    .shape_1_path{fill:#1B1423;}
</style>
<path class="shape_1_path" d="M695.3,579.1l-665-76.9c-10.5-1.2-18.6-10-18.8-20.6L0,0h722v552.4C722,567.2,710,579.1,695.3,579.1z"/>
</svg>

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 722 591.8" xml:space="preserve">
<style type="text/css">
    .shape_2_svg{fill:#F6811D;}
</style>
<path class="shape_2_svg" d="M687.2,591.7l-663-78.2C12.1,512.1,3,501.8,2.9,489.7L0,0h722l-14.5,574.1C707.2,584.8,697.8,592.9,687.2,591.7
    z"/>
</svg>

现在我们需要将svg路径转换为css剪辑路径。本例中使用在线svg路径converter
每个svg一个接一个的转换后，我们可以直接在css中使用。这里的剪辑路径元素是绝对位置的，因为一个或多个剪辑路径重叠或折叠，不能正常显示。绝对位置不影响内容的增加，因为剪辑路径元素的宽度和高度相对于父元素。
一个二个一个一个

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

我来回答

css用于从带有border-radius的底角裁剪路径

2条答案

相关问题

热门标签

最新问答