Question

请参阅下图...

enter image description here

我想通过CSS制作这个。

我现在使用此分隔符作为在我的容器内响应的图像（jpg）。问题是我似乎无法准确匹配颜色或使白色晶体清晰锐利。

我认为CSS是解决这个问题的最佳方法。

尺寸为1170px x 100px

使用Bootstrap 3.2

<div class="container">
  <div class="row">
    <img class="img-responsive" src="img/separator.gif">
  </div>
</div>

Answer 1

解决方案1：，边框为vw个单位：

DEMO （演示版为Harry）

＆＃13;

.separator{
    width:95vw;
    margin:0 auto;
}
.separator:before, .separator:after{
    content:'';
    display:block;
}
.separator:before{
    border-left: 95vw solid #DA7317;
    border-bottom: 60px solid transparent;
    border-right:0;
    border-top:0;
}
.separator:after{
    border-right: 95vw solid #000;
    border-top: 50px solid transparent;
    border-left:0;
    border-bottom:0;
    margin-top:-45px;
}

＆＃13;

<div class="separator">
</div>

＆＃13;

解决方案2：，转换为旋转：

<强> DEMO

＆＃13;

.separator{
    position:relative;
    padding-bottom:5.5%;
    overflow:hidden;
}
.separator:before, .separator:after{
    content:'';
    position:absolute;
  -webkit-backface-visibility:hidden;
}
.separator:before{
    background: #DA7317;
    bottom:100%; left:-1%;
    width:101%; height:200%;
    
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);    
}
.separator:after{
    background: #000;
    top:100%;
    width:100%; height:100%;
    
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    
    -webkit-transform: rotate(-2.5deg);
    -ms-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);  
}

＆＃13;

<div class="separator"></div>

＆＃13;

Answer 2

Using SVG: ^Recommended

You could make use of SVG to create the shape. Since it is a separator (which implies, it is not going to contain any text within the shape), it is more like an image and SVG fits the case perfectly. SVG can auto-scale without having any impact to the actual shape and since it is vector based, it doesn't get pixelated on scaling either.

We can use either SVG path or polygons to create this shape. Below are the sample snippets.

/* Using SVG Path */

svg {
  height: 100px;
  width: 1170px;
}
path#top {
  fill: rgb(218, 115, 23);
}
path#bottom {
  fill: rgb(42, 42, 42);
}

<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <path d='m 0,0 h 100 l -100,95z' id='top' />
  <path d='m 0,100 h 100 l 0,-90z' id='bottom' />
</svg>

/* Using SVG Polygons */

svg {
  height: 100px;
  width: 1170px;
}
polygon#top {
  fill: rgb(218, 115, 23);
}
polygon#bottom {
  fill: rgb(42, 42, 42);
}

<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <polygon points='0,0 100,0 0,95' id='top' />
  <polygon points='0,100 100,100 100,10' id='bottom' />
</svg>

Using Gradients:

You could achieve the shape by using two linear-gradient for background and position them appropriately like in the below snippet. Linear gradients can scale without affecting the shape.

.separator {
  height: 100px;
  width: 1170px;
  background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 49%, rgb(218, 115, 23) 50%), 
    linear-gradient(to top left, rgb(42, 42, 42) 49%, rgba(0, 0, 0, 0) 50%);
  background-size: 100% 95%, 100% 90%;
  background-position: 0% 0%, 0% 90%;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="separator"></div>

None of the approaches produce a perfectly smooth output for the white colored area in the middle. While SVG produces more smoother edges, gradients produce a very rough/coarse output.

有角度的CSS分隔符

2 个答案: