Question

我一直在玩三角形＆＃34; hack＆＃34;使用css，但无法使用渐变背景色。

.m--label {
    position: relative;
    font-size: .9em;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    color: #fff;
    background-color: #E00000;
    line-height: 38px;
}

.m--label:after {
    margin: 0;
    padding: 0;
    right: 0;
    float: right;
    position: absolute;
    content: "";
    border-top: 40px solid #E00000;
    border-right: 40px solid #2b2b2b;
    border-bottom: 0px solid #E00000;
}

如果我将border-top或bordem-bottom颜色更改为渐变，请执行以下操作：

border-top: 40px solid  -webkit-linear-gradient(top, rgba(224,0,0,1) 0%,rgba(255,59,0,1) 100%);

它完全淡化了三角形，所以它看起来像一个简单的盒子。此外，使用此解决方案，它只适用于Chrome。这可能是什么解决方案？

Answer 1

也许渐变背景会更容易管理：

＆＃13;

.m--label {
    position: relative;
    font-size: .9em;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    color: #fff;
    background-color: #E00000;
    line-height: 38px;
  background-image:linear-gradient(-225deg, transparent  calc(100% - 40px), rgba(224,0,0,1) calc(100% - 40px),rgba(255,59,0,1) calc(100% - 20px));
}

＆＃13;

<div class="m--label"></div>

＆＃13;

CSS三角形与渐变背景颜色

1 个答案: