具有边框半径的圆角仅影响一侧答案

【问题标题】：Rounded corners with border-radius only affecting one side具有边框半径的圆角仅影响一侧
【发布时间】：2019-03-27 10:37:01
【问题描述】：

我正在尝试重新创建这个：

我正在使用 SVG 和 Polygon，有没有更简单的方法来修复边界半径？

<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>

【问题讨论】：

请提供适当的细节或jsfiddle
已编辑（我添加了 jsfiddle 来解释我所拥有的）

标签： html css svg polygon

【解决方案1】：

我会使用带有 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>

【讨论】：

【解决方案2】：

会发生什么情况是你圆了 svg 元素的角而不是多边形的角。在下一个示例中，我通过为角添加二次贝塞尔曲线，将多边形重新计算为圆角路径。希望对你有帮助。

svg{width:90vh}

<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" >
	<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="fill: url(#grad1);">
  </polygon>-->
    
    <path style="fill: url(#grad1);" d="M6.123233995736766e-16,20 Q0,10 9.950371902099892,9.00496280979001L90.04962809790011,0.9950371902099887 Q100,0 100,10L100,90 Q100,100 90.04962809790011,99.00496280979002L9.950371902099892,90.99503719020998 Q0,90 6.123233995736766e-16,80Z" />
</svg>
</div>

另一种选择是使用带圆角的 HTML 元素并使用 perspective、transform-style: preserve-3d; 和 transform: rotateY() 旋转它。

在第二种情况下，文本也会被转换。

【讨论】：