css3 - `clip-path` 如何绘制圆角平行四边形呢?
.polygon-box {
width: 192px;
height: 65px;
background-color: #8D8D8D;
clip-path: polygon(0px 0px, 8px 65px, 192px 65px, 184px 0px);
}clip-path 这样绘制的是非圆角的平行四边形!
共有3个答案
可以用 clip-path: path() 实现
path中可以使用各种命令画直线、贝塞尔曲线、椭圆等
路径命令
路径命令是对要绘制的路径的说明。每一个命令由代表命令的字母和代表参数的数字组成。
SVG 定义了六种路径命令类型，一共 20 条命令：
移动到：M、m
画线至：L、l、H、h、V、v
三次方贝塞尔曲线：C、c、S、s
二次方贝塞尔曲线：Q、q、T、t
椭圆曲线：A、a
封闭路径：Z、z
这是之前用path实现的圆角梯形 https://jsrun.net/JHFKp
path介绍：https://developer.mozilla.org/en-US/docs/Web/CSS/path
path中相关命令： https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
用的其他方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.button {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
width: 100px;
height: 30px;
text-align: center;
transform: skewX(-45deg);
border-radius: 20px;
}
.button>div {
color: white;
transform: skewX(45deg);
}
</style>
</head>
<body>
<div href="#yolo" class="button">
<div>Click me</div>
</div>
</body>
</html>
.shape {
width: 200px;
height: 100px;
background-color: #f00;
-webkit-clip-path: polygon(30% 0, 100% 0, 70% 100%, 0% 100%);
clip-path: polygon(30% 0, 100% 0, 70% 100%, 0% 100%);
}-
问题内容： 我正在创建路径，并使用和在每个路径中添加多行。然后绘制所有路径。但是某些路径中的线之间有1-2个像素的间隔。如何删除这些空格？我的代码是这样的： 问题答案： 也许这会创造你想要的 :)
-
请问怎么把vantUI里的van-tabbar改造成这样凸起来比较平滑的半圆呀 用过伪元素，但是效果不太好 画出来的效果是这样，中间有一条细线，不知道你们能不能看出来，而且跟下面的tabbar的左右连接处不是很丝滑
-
问题内容： 我发现只能填充矩形，而没有圆角，该怎么办？ 问题答案： HTML5画布没有提供绘制带有圆角的矩形的方法。 如何使用和方法？ 您也可以使用方法代替方法。
-
#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 1
-
问题内容： 使用Mobile Safari 转到http://m.google.com页面时，您会在页面顶部看到漂亮的栏。 我想那样画一些梯形（美国：梯形），但我不知道怎么做。我应该使用CSS3 3D转换吗？如果您有实现此目标的好方法，请告诉我。 问题答案： 您可以使用以下CSS： 制作所有这些形状真的很酷，请查看以下更漂亮的形状： http://css-tricks.com/examples/S
-
我到处都找过了，我似乎无法让OpenGL绘制一个简单的四边形。窗口在正确的颜色背景下显示得很好，但OpenGL就是不会绘制框。我正在使用OpenGL 4.4.0-构建20.19.15.4463窗口大小为1920x1080 这是我目前拥有的代码： 在Main.java： 在实体框中：