CSS: clip-path:多边形圆角边框
在 CSS 中，clip-path 属性允许你创建复杂的裁剪路径，包括多边形。然而，clip-path 本身并不直接支持圆角边框。如果你想创建一个具有圆角边框的多边形，可以结合 clip-path 和 border-radius 属性来实现。
以下是一个示例，演示如何创建一个具有圆角边框的多边形：
示例：圆角六边形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip-Path with Rounded Corners</title>
<style>
.polygon {
width: 200px;
height: 200px;
background-color: #3498db;
clip-path: polygon(
50% 0%,
100% 25%,
100% 75%,
50% 100%,
0% 75%,
0% 25%
);
border-radius: 20px;
position: relative;
}
.polygon::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border: 10px solid #2980b9;
border-radius: 30px;
clip-path: polygon(
50% 0%,
100% 25%,
100% 75%,
50% 100%,
0% 75%,
0% 25%
);
}
</style>
</head>
<body>
<div class="polygon"></div>
</body>
</html>解释
.polygon元素：- 使用
clip-path: polygon(...)创建一个六边形。 - 使用
border-radius: 20px为元素添加圆角。
- 使用
- 伪元素
::before：- 创建一个伪元素，覆盖在
.polygon元素上。 - 使用
border属性为伪元素添加边框。 - 使用
border-radius: 30px为伪元素添加圆角。 - 使用
clip-path: polygon(...)为伪元素创建一个六边形裁剪路径。
- 创建一个伪元素，覆盖在
注意事项
- 由于
clip-path和border-radius的组合效果可能因浏览器的不同而有所不同，请确保在多个浏览器中进行测试。 - 伪元素的
border-radius值应比实际元素的border-radius值大，以确保边框的圆角效果。
相关·内容
我正在尝试使这个多边形的顶部和底部边缘与图标相同。有人知道我做错了什么吗？ ;.activity__icon { text-align: center; clip-path: middle;
} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesom
浏览 108提问于2020-11-28得票数 0
回答已采纳
3回答
我想剪辑边框的div，其中有一些border-radius，以模仿如何计时器过期。但是构建自定义多边形似乎很难控制边框长度。有什么更简单、更优雅的方法来处理CSS (或者SVG)呢？
浏览 0提问于2018-01-25得票数 0
回答已采纳
1回答
但我面临的问题是，剪辑路径不能剪辑圆角边框border-radius: 0.5rem;。我搜索了一下，发现可以使用多边形来裁剪路径。我找到了一个链接，你可以在这里生成要裁剪的多边形项目：Clip poly generator。 但是我找不到一个完美的多边形。圆圈是圆角的，斜角项目只有锐利的边框。 position: relative; height: 6rem; border-
浏览 16提问于2021-03-29得票数 1
回答已采纳
我试图用CSS边框-radius属性创建这种直角：但到目前为止，我只得到了基本的CSS圆角。有人有办法解决这个问题吗？我试着不使用图像来创造效果。
提前谢谢。
浏览 3提问于2016-06-06得票数 3
回答已采纳
我试图设计形状，作为下面的截图，我成功地设计了它，但问题是我无法在里面填充文本，文本总是出现在div之后。<html><meta name="viewport" content="width=device-width, initial-scale=1">.div2{ border-right: 25px solid transparent;
浏览 3提问于2021-06-13得票数 0
回答已采纳
在我的设计中，我必须创建一个圆角多边形。就像这张照片。
img {} <img src="assets
浏览 8提问于2022-05-18得票数 0
2回答
我已经构建了一个UserControl，它基本上是一个网格，它的两端可以是圆角，也可以是某个多边形。我有一个四舍五入的属性，它改变圆角边框和多边形的可见性以匹配(如果有人将Rounded=设置为“True”，则圆角边框可见，多边形隐藏，反之亦然。
浏览 13提问于2019-01-18得票数 0
1回答
我在CSS中做了一个T恤形状的多边形，它显示的完全一样，除非我试图在悬停时将它动画化。一旦我悬停，我得到一个正确的和底部的边框，相同的颜色，为多边形设置的背景，而动画正在发生。动画完成后，边框再次消失。我试过所有的东西，从改变边框大小/颜色和背景等，但什么都没有改变。polygon(68% 5%, 32% 5%, 0 24%, 9% 44%, 25% 36%, 25% 90%, 75% 90%, 75% 36%, 91% 44%, 100% 24%);
cl
浏览 1提问于2016-01-11得票数 2
回答已采纳
1回答
我想实现一个自定义图像三角形形状与圆角像这样使用css我在寻找如何做到这样却一无所获，我想实现我的css可以做到这样的效果，有什么想法吗？如果我的问题看起来像其他问题，很抱歉
谢谢
浏览 2提问于2013-06-25得票数 0
7回答
田野集上的圆角
、、、、
我注意到"fieldset“标记在IE上呈现圆角边框(它在其他浏览器上呈现平方)。<fieldset></fieldset>有人知道为什么吗？如何保持圆角，但与另一边框颜色？
编辑:对不起，不好意思，我不问如何在火狐/其他浏览器上设置圆角，我想知道如何在
浏览 8提问于2009-06-02得票数 27
回答已采纳
1回答
我试图用圆角和背景图像构建以下元素：我最初对三角形使用了:after元素，但是我无法获得背景图像“流血”，因为从技术上讲，它是一个单独的元素。但是，由于元素的底部是三角形结束的地方，边框半径只影响顶角。我现在在这里：.service_item{ background: var(--color-yellow); background-size:cover;
background-position:ce
浏览 4提问于2022-07-20得票数 0
回答已采纳
使用当前的CSS而不是CSS3，有什么方法可以指定凸起类型的边框样式吗？我想以某种方式强调一下我的菜单。基本上我想要的边框是圆角的，而不是圆角的。
浏览 1提问于2010-07-26得票数 0
回答已采纳
2回答
我正在尝试使用纯css创建下面的按钮。它有以下要求。
6px; border-image-slice: 1;
clip-path
浏览 0提问于2019-01-18得票数 4
回答已采纳
我正在设计一个具有圆角边框(边框半径)的输入域的样式，并尝试添加一个渐变到所述边框。我可以成功地制作渐变和圆角边框，但两者都不能一起工作。它要么是没有渐变的圆角，要么是有渐变的边框，但没有圆角。webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;
有没有办法让这两个CSS
浏览 10提问于2011-04-19得票数 89
回答已采纳
1回答
我想放置不同边框与不同颜色的圆角图标。像我想要的那样链接图像。我设计圆角使用顺风css类，我没有得到如何给予不同的边框颜色。
浏览 4提问于2022-02-15得票数 -1
回答已采纳
3回答
有没有可能做圆角CSS边框，一旦用户上传了图像？我想让css做一个圆角边框，如下图所示：所以任何css都需要和IE7一起工作。
浏览 1提问于2011-09-26得票数 0
回答已采纳
2回答
我读过许多关于CSS剪裁的教程，其中通常有一些使用多边形裁剪路径的简单示例，然后深入到BNF语法片段，描述如何在没有任何有意义的示例的情况下使用几何图形框。我把这解释为用填充框代替边距框将在我的示例中设置相对于蓝色矩形的多边形(路径填充的边框)，因此我可以制作一个宽度为100%的多边形，>100%的高度矩形。在实践中，当我将样式设置为"clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%) fill-box&q
浏览 5提问于2020-04-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
