html - 具有边框半径的圆角仅影响一侧
问题描述
我正在尝试重新创建这个:
我正在使用 SVG 和多边形,有没有更容易做到这一点并修复边界半径的方法?
<div class="showCaseVideo" style="background: none;">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="border-top-left-radius: 300px 70px; border-bottom-left-radius: 300px 70px; border-radius: 35px;">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#076FAD;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#28AADD;stop-opacity:1"></stop>
</linearGradient>
</defs>
<polygon points="0,10 100,0 100,100 0,90" style="/*! display: none; *//*! color: white; *//*! stroke: white; */fill: url(#grad1);/*! display: M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z; */" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z">
</polygon>
</svg>
</div>
解决方案
我会使用带有 3d 变换的伪元素。
.slanted {
position: relative;
perspective: 500px;
width: 180px;
height: 120px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2.4;
font-weight: bold;
font-family: sans-serif;
}
.slanted::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: cornflowerblue;
border-radius: 10px;
transform: rotateY(-20deg);
z-index: -1;
}
<div class="slanted">
Slanted
</div>
推荐阅读
- python - 仅当三分之一或三分之三为真时才为真的代码
- coq - coqide中如何逐步遍历分号分隔的战术序列?
- python - 如何修复 Python Gekko APMoniter 求解器错误:没有等式的方程
- xml - 如何从 Parsed XML 字符串返回特定值
- r - 加载“caret”库时出错->需要“recipes”库->安装“recipes”时出错
- html - 在 HTML 中对段落进行编号,同时忽略其中一些
- vb.net - “BlockInput”功能在程序中不起作用
- c# - 为什么 c# 不能推断强制转换?
- selenium - 是否可以使用页面对象为多个类似屏幕创建可重用和通用的 Specflow 步骤定义?
- r - dplyr / bigrquery 在 BigQuery 中查询/绑定相同架构的多个表的方式?