主页 / 问题 / 645732
Accepted
Alexandr_TT
Asked:2020-03-29 20:04:50 +0000 UTC2020-03-29 20:04:50 +0000 UTC

一个角度的三种背景颜色

  • 772

我怎样才能得到类似于这张图片的背景：

在此处输入图像描述

只有 3 种颜色来自顶角，如旭日形。

也许最好使用普通图像PNG或SVG背景图像？

资源

html

7 个回答

  1. Best Answer

    好吧，这样一个 css 上的“曲线”版本使用border：

    .bg {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  overflow: hidden;
  background: #16334a;
}

.bg:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-bottom: 100vh solid #204158; 
  border-left: 70vw solid transparent;
}

.bg:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  border-top: 70vh solid #0a253e; 
  border-right: 100vw solid transparent;
}

.inner {
  position: relative;
  z-index: 5;
  color: #ccc;
  text-transform: uppercase;
  font-family: Arial;
  text-align: center;
  top: 40%;
}
    <div class="bg">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, impedit.
  </div>
</div>

    • 13

  2. SVG

    这可以通过SVG. 我用过三个polygon。它们被设置为背景图像。或者使用它们inline，以便您可以在它们上应用属性CSS。

    html, body {
  margin: 0;
  padding: 0;
}
.triple {
  width: 250px;
  height: 250px;
}
.triple:hover {
  width: 500px;
  height: 100px;
}  
    <svg class="triple" viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon fill="#dd2" points="0,0 100,0 0,60" />
  <polygon fill="#bb2" points="0,60 100,0 30,100 0,100 " />
  <polygon fill="#992" points="30,100 100,0 100,100" />
</svg>

    来自贡献者 @Persijn的答案的松散翻译 。

    • 9

  3. 还有另一个渐变选项。

    body {
  margin: 0;
}

div {
  height: 100vh;
  background-image: linear-gradient(135.7deg, transparent 70vw, #000 70.1vw), linear-gradient(156.5deg, #ccc 40vw, #666 40.1vw);
}
    <div></div>

    • 7

  4. CSS

    效果可以通过使用伪元素和变换来实现CSS。
    下面是代码片段。
    但我认为 usingCSS不是正确的选择。
    最好使用 PNG 图片。
    该代码段使用一对具有不同背景颜色的伪元素，skewed以所需的角度倾斜 ( ) 以提供三色效果。

    .bg {
  position: relative;
  height: 200px;
  width: 400px;
  padding: 4px;
  background: orange;
  overflow: hidden;
}
.bg:after,
.bg:before {
  position: absolute;
  content: '';
  left: 0px;
  height: 100%;
  width: 100%;
  transform-origin: right top;
}
.bg:before {
  top: 0px;
  background: red;
  transform: skewY(-45deg);
}
.bg:after {
  top: -100%;
  background: yellow;
  transform: skewY(-15deg);
}
span {
  position: relative;
  z-index: 2;
}

/* Just for demo */
.bg:hover {
  height: 200px;
  width: 500px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
  <span>Some content inside</span>
</div>

    贡献者 @Harry对答案的粗略翻译 。

    • 6

  5. clip-path（FF 的 SVG 回退）和伪元素。

    body {
  margin: 0;
}

#clips {
  display: block;
  height:0;
  width:0;
  overflow: hidden;
}

div {
  height: 100vh;
  position: relative;
  background-color: #000;
}

div:before, div:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 60%);
  clip-path: url(#clip1);
  clip-path: polygon(0% 0%, 100% 0%, 0% 60%);
  background-color: #ccc;
}

div:before {
  -webkit-clip-path: polygon(100% 0%, 60% 100%, 0% 100%, 0% 60%);
  clip-path: url(#clip2);
  clip-path: polygon(100% 0%, 60% 100%, 0% 100%, 0% 60%);
  background-color: #666;
}
    <div></div>

<svg id="clips">
  <defs>
    <clipPath clipPathUnits="objectBoundingBox" id="clip1">
      <polygon points="0,0 1,0 0,0.6" />
    </clipPath>
    <clipPath clipPathUnits="objectBoundingBox" id="clip2">
      <polygon points="1,0 0.6,1 0,1 0,.06" />
    </clipPath>
  </defs>
</svg>

    • 5

  6. 您可以旋转 2 个白色半透明矩形

    <svg viewbox="-250,0,250,150" style="background: steelblue;">
  <rect x=-500 height=150 width=500 fill=#fff4 transform=rotate(-22)></rect>
  <rect x=-500 height=150 width=500 fill=#fff4 transform=rotate(-44)></rect>
<svg>

    • 3

  7. 锥形渐变就是为这样的任务而设计的。

    body{
  margin: 0;
  height: 100vh;
  background: conic-gradient(from 180deg at right top, #204158 55deg,#16334a  55deg, #16334a 70deg, #0a253e 70deg);
}

    • 1

相关问题