带一个圆角的三角形答案

【问题标题】：Triangle with one rounded corner带一个圆角的三角形
【发布时间】：2014-05-20 18:48:02
【问题描述】：

我只想为三角形制作一个圆角，但我无法做到。
这是我的code：

.arrow-left {
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  border-right: 80px solid blue;
}

&lt;div class="arrow-left"&gt;&lt;/div&gt;

我需要将指向左的角变成圆角，如下图所示：

【问题讨论】：

看起来像一个半圆形？
查看更新后的问题。
最简单的方法是制作一个透明的 png 叠加层，在左侧有一条小的白色曲线覆盖三角形的尖端...您也可以使用一个圆角旋转 45 度的框除了提示之外的所有内容都被不透明的 div 覆盖。
类似的问题只在相反的方向 - stackoverflow.com/questions/11913645/…
看到这支笔codepen.io/valentinfarcas/pen/xGrlD

标签： css svg css-shapes

【解决方案1】：

我知道这有点 hacky，但我不认为有一个简单的方法可以用一个类来做到这一点。

我所做的只是用border-radius:10px 将一个框旋转45 度，然后将其包含在另一个div 中，宽度设置为箭头所需的宽度和overflow:hidden，这样溢出的所有内容都是不可见的。

.arrow-left {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 20px;
  background: black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 10px;
}

.cover {
  position: absolute;
  height: 100px;
  width: 40px;
  overflow: hidden;
}

<div class="cover">
  <div class="arrow-left"></div>
</div>

【讨论】：

不错的一个！我知道你可以用一些边界技巧来创建箭头，但我不知道你可以用边界半径更进一步。快速搜索一下 caniuse 和浏览器支持似乎没问题（除了 ie8，但谁在乎箭头），caniuse.com/#feat=border-radius

【解决方案2】：

您可以使用至少 2 种方法制作一个带有一个圆角的响应式三角形：

使用 CSS：

一个div和一个伪元素和：

绝对定位
padding technique 保持三角形纵横比
2d transforms
overflow:hidden;
transform technique 制作三角形

.arrow-left {  
  position: relative;
  width: 15%;
  padding-bottom:15%;
  border-radius: 10px;
  overflow: hidden;
  transform-origin:100% 0;
  transform: rotate(-45deg);
}
.arrow-left:after {
  content: "";
  position: absolute;
  top: 0; right:8px;
  width:100%; height:141%;
  transform-origin:inherit;
  transform: rotate(45deg);
  background:#000;
}

&lt;div class="arrow-left"&gt;&lt;/div&gt;

请注意，您需要将供应商前缀添加到 transform 和 transform-origin 属性（有关canIuse 的更多信息）

内嵌 SVG：

此示例使用一个 path 元素表示三角形，并使用一个 bezier curve command 表示圆角（Q0 5 0.8 4.2 在d 属性中）：

svg{
  display:block;
  width:10%;
}

<svg viewbox="0 0 5 10">
  <path d="M5 0 V10 L0.8 5.8 Q0 5 0.8 4.2z" />
</svg>

【讨论】：

【解决方案3】：

你可以试试这个，根据需要修改。

http://jsfiddle.net/K44mE/947/

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -60px;
  position: relative;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}

<div id="player">

  <div id="outer">
    <div id="inner">&nbsp;</div>
  </div>

</div>

【讨论】：

【解决方案4】：

使用overflow: hidden;

.corner {
 position: absolute;
 border-radius: 4px;
 overflow: hidden;
 top: 0em;
 right: 0em;
 margin: 0em;
 padding: 0em;
 text-align: center;
 border-color: #E8E8E8;
 width: 4em;
 height: 4em;
 z-index: 1;
 -webkit-transition: border-color 0.1s ease;
 transition: border-color 0.1s ease;
 }

.corner:after {
 position: absolute;
 content: "";
 right: 0em;
 top: 0em;
 z-index: -1;
 width: 0em;
 height: 0em;
 background-color: transparent !important;
 border-top: 0em solid transparent;
 border-right: 4em solid transparent;
 border-bottom: 4em solid transparent;
 border-left: 0em solid transparent;
 border-right-color: inherit;
 -webkit-transition: border-color 0.1s ease;
 transition: border-color 0.1s ease;
 }

【讨论】：

【解决方案5】：

添加到您的代码中

border-radius:10px

【讨论】：