使用 CSS 和 HTML 的自定义 div 形状
Custom div Shape with CSS and HTML
我想创建一个 div 这种形状。我无法使用诸如 ::before 和 :: after 之类的伪元素在所有角上得到圆角。我尝试修改此代码,但无法达到所需的形状和所有角落的圆角。
<div class="trapezoid">
</div>
.trapezoid {
position: relative;
width: 90%;
height: 200px;
overflow: hidden;
border-radius:20px !important;
}
.trapezoid:after {
content: '';
position: absolute;
top: -100px;
left: 0;
width: 140%;
height: 100%;
background: red;
border-radius: 20px 20px 20px 20px;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(400px) rotateX(45deg);
-moz-transform: perspective(400px) rotateX(45deg);
-ms-transform: perspective(400px) rotateX(45deg);
-o-transform: perspective(400px) rotateX(45deg);
transform: perspective(400px) rotateX(45deg);
}
我会使用 clip-path
CSS 声明,对基本形状使用 path()
函数。
您必须使用正确的数字稍作调整才能获得您想要的确切尺寸和角,但我认为这可能是可行的方法:
.shape {
background: lightgrey;
width: 330px;
height: 140px;
clip-path: path('M70 0 320 0 A 10 10 0 0 1 330 10 L 330 130 A 10 10 0 0 1 320 140 L 10 140 A 10 10 0 0 1 0 130 L 0 70 A 5 10 45 0 1 6 60 L 60 6 A 5 10 45 0 1 70 0Z')
}
<div class='shape'></div>
或者使用 <svg>
的一些不同方法(点击 整页 link 当 运行 时):
.svg {
width: 95vw;
height: 95vh;
display: block;
margin: auto;
}
/*.shape {
background: lightgrey;
width: 100%;
height: 100%;
}*/
<svg class='svg' viewBox='0 0 330 130'>
<path class='shape' fill='lightgrey' d='M70 0 320 0 A 10 10 0 0 1 330 10 L 330 130 A 10 10 0 0 1 320 140 L 10 140 A 10 10 0 0 1 0 130 L 0 70 A 5 14.14213 45 0 1 5 60 L 60 5 A 5 14.14213 45 0 1 70 0Z'></path>
</svg>
我想创建一个 div 这种形状。我无法使用诸如 ::before 和 :: after 之类的伪元素在所有角上得到圆角。我尝试修改此代码,但无法达到所需的形状和所有角落的圆角。
<div class="trapezoid">
</div>
.trapezoid {
position: relative;
width: 90%;
height: 200px;
overflow: hidden;
border-radius:20px !important;
}
.trapezoid:after {
content: '';
position: absolute;
top: -100px;
left: 0;
width: 140%;
height: 100%;
background: red;
border-radius: 20px 20px 20px 20px;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(400px) rotateX(45deg);
-moz-transform: perspective(400px) rotateX(45deg);
-ms-transform: perspective(400px) rotateX(45deg);
-o-transform: perspective(400px) rotateX(45deg);
transform: perspective(400px) rotateX(45deg);
}
我会使用 clip-path
CSS 声明,对基本形状使用 path()
函数。
您必须使用正确的数字稍作调整才能获得您想要的确切尺寸和角,但我认为这可能是可行的方法:
.shape {
background: lightgrey;
width: 330px;
height: 140px;
clip-path: path('M70 0 320 0 A 10 10 0 0 1 330 10 L 330 130 A 10 10 0 0 1 320 140 L 10 140 A 10 10 0 0 1 0 130 L 0 70 A 5 10 45 0 1 6 60 L 60 6 A 5 10 45 0 1 70 0Z')
}
<div class='shape'></div>
或者使用 <svg>
的一些不同方法(点击 整页 link 当 运行 时):
.svg {
width: 95vw;
height: 95vh;
display: block;
margin: auto;
}
/*.shape {
background: lightgrey;
width: 100%;
height: 100%;
}*/
<svg class='svg' viewBox='0 0 330 130'>
<path class='shape' fill='lightgrey' d='M70 0 320 0 A 10 10 0 0 1 330 10 L 330 130 A 10 10 0 0 1 320 140 L 10 140 A 10 10 0 0 1 0 130 L 0 70 A 5 14.14213 45 0 1 5 60 L 60 5 A 5 14.14213 45 0 1 70 0Z'></path>
</svg>