小编Man*_*gux的帖子

如何在形状上正确添加阴影和渐变?

我想做以下设计:

样本图片

我尝试过:after,:before但它不起作用.这是我目前的代码:

.design {
  background: #ea053a;
  display: inline-block;
  height: 155px;
  margin-left: 33px;
  margin-right: 40px;
  position: relative;
  width: 228px;
}

.design:before {
  border-top: 43px solid #ea053a;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  margin-right: 40px;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 55px;
  margin-top: 100px;
  width: 128px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="design"></div>
Run Code Online (Sandbox Code Playgroud)

(小提琴)

我怎么能保持原始设计和以下两个属性?:

box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
background-image: linear-gradient(to bottom, #ea053a, #d0021b);
Run Code Online (Sandbox Code Playgroud)

html css linear-gradients css3 css-shapes

18
推荐指数
1
解决办法
861
查看次数

标签 统计

css ×1

css-shapes ×1

css3 ×1

html ×1

linear-gradients ×1