Css

Question

有什么方法可以制作出与 CSS 图像中相同的样式吗？

Answer 1

试试下面的方法CSS

 <div class="meter red">
      <span style="width: 25%"></span>
    </div>

.meter { 
    height: 20px;  /* Can be anything */
    position: relative;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.red > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}

.meter > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

Answer 2

HTML5 允许我们在任何元素上绘制多个背景图像。我们可以使用 CSS3 的 linear-gradient() and repeating-linear-gradient() 函数来创建 2 个背景图像并将它们绘制在相应的元素上。

以下代码将创建您需要的背景：

#header {
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.15),
                                                        rgba(255,255,255,0.15) 15px,
                                                        transparent 15px,
                                                        transparent 25px),
                      linear-gradient(to bottom, brown, red);
}

Note: Order of images in background-image property is important. Swapping them won't create the effect you need.

输出图像：

工作演示：

#header {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 15px, transparent 15px, transparent 25px), linear-gradient(to bottom, brown, red);
  height: 80px;
  border-radius: 5px 5px 0 0;
}

<header id="header"></header>

Css - 创建 header 渐变和图案

Css - Create header gradient and pattern

html

css-shapes