圆角三角形[重复]答案

【问题标题】：triangle with rounded corners [duplicate]圆角三角形[重复]
【发布时间】：2017-07-27 21:18:00
【问题描述】：

我在 CSS 中创建三角形时遇到问题。如何制作带圆角的三角形？我必须做这样的事情

【问题讨论】：

你应该共享一个最小代码并首先寻找重复，这是一种多余的问题......

【解决方案1】：

.arrow-right {
  width: 5px; 
  height: 5px; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
  border-radius:5px;
}

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

【讨论】：

【解决方案2】：

rotate + overflow 可以（使用额外元素或伪元素）：

.tr {
  height:40px;
  width:40px;
  overflow:hidden;
  transform:scale(1,1.2);/* increase visual height */
  }
.tr div {/* could be a pseudo */
  width:70%;
  height:70%;
  float:right;
  background:#C20009;
  transform:rotate(-45deg);
  box-shadow: 0 0 1px, inset 0 1px 1px , inset 5px -5px 5px rgba(0,0,0,0.3);
  transform-origin: top right;
  border-radius : 8px 0 0 0 /* and the rounded corner to finish */
  }

<div class="tr">
  <div></div>
</div>

【讨论】：