html - 渐变三 Angular 形

标签 html css

<分区>

我知道怎么用css做三 Angular 形,但是渐变三 Angular 形?

我做到了这一点:

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid black;
}

.triangle {
  background-image: linear-gradient(to bottom right, black, blue);
}
<div class="triangle"></div>

最佳答案

只需使用 clip-path 来创建三 Angular 形:

.triangle {
  width: 100px;
  height:86.6px; /* 0.866 * Width in order to have an equilateral triangle [0.866 = (sqrt(3)/2)] */
  background-image: linear-gradient(to bottom right, black, blue);
  clip-path:polygon(50% 0,100% 100%, 0 100%);
}
<div class="triangle"></div>

关于html - 渐变三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59139207/

相关文章:

html - bootstrap html等行间距

javascript - 如何使网页中的表格垂直滚动,同时使其他所有内容固定在适当的位置

jquery - Bootstrap DIV 在 JQuery 中滑动

html - 如何并排放置 div?

javascript - 滚动条上显示循环进度条 - 百分比文本问题

javascript - 如何创建两列 HTML 表单

javascript - 如何在 overflow auto 中提出 div 元素?

javascript - IE7 让我的生活变得悲惨!使用 css toggle 在 html 表列(w/colspan)之间获取间隙

javascript - 如何在使用 javascript 和 css 弹出的消息上设置动画或使用过渡效果?

php - PHP 中的 Javascript 变量