使用CSS边框的三角形和倒三角形

I am trying to achieve the following image example using CSS borders. Is this possible? Also, is it possible for it to be responsive as well? I started a fiddle here. I know I've seen this somewhere, but can't remember where.

我正在尝试使用CSS边框实现以下图像示例。这是可能的吗?而且，它是否也能响应呢?我在这里开始演奏小提琴。我知道我在某个地方见过，但不记得在哪儿了。

Here is what I have so far -

这是我到目前为止所得到的

HTML

HTML

<div class="container">

    <div class="row">

        <div class="sign-up col-sm-9">

            <div class="col-sm-4">

                <h3>SIGN UP to get the latest updates on Security News</h3>

            </div>

            <div class="col-sm-4">

            </div>

            <div class="col-sm-4">

            </div>

        </div>  <!-- /.sign-up -->          

        <div class="invert"></div>

            <div class="submit col-sm-3">

                <input type="submit" value="Submit">

            </div>

    </div> <!-- /.row -->

</div><!-- /.container -->

CSS -

CSS—

.sign-up {
  background: #002d56;
  padding: 0px 0px;
  color: #ffffff;
  font-size: 20px;
}

.sign-up h3{
  padding: 10px 0px;
  font-size: 20px;
}

.sign-up:after {
  content: "";
  display: block;
  width: 0; 
  height: 0; 
  border-top: 70px solid #ffffff;
  border-bottom: 69px solid #ffffff;
  border-left: 70px solid #002d56;
  position: absolute;
  right: 0;
}

.invert {
  position:relative;
}

.invert:after {
  content: "";
  display: block;
  width: 0; 
  height: 0; 
  border-top: 70px solid #cfab7a;
  border-bottom: 69px solid #cfab7a;
  border-left: 70px solid #ffffff;
  position: absolute;
  right: 118px;
}

.submit {
  background: #cfab7a;
  width: 0; 
  height: 0; 
}

.submit:before {

}

.submit input[type="submit"] {
  background: #cfab7a;
  padding: 10px 0px;
  border: none;
}

1 个解决方案

#1

Well, I have tried to achieve what you wanted, please check this code and take a look at this Fiddle

我已经试过实现你想要的，请检查一下这个代码，看看这个小提琴

Note: It has to be achieved with two triangles since the CSS triangles are drawn using borders.

注意:它必须使用两个三角形实现，因为CSS三角形是使用边框绘制的。

HTML:

HTML:

 <div class="rectangle"></div> 
 <div class="hidden-div">
     <div class="big-triangle"></div>
     <div class="triangle"></div> 
  </div>

CSS:

CSS:

.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 63px 0 63px 80px;
    border-color: transparent transparent transparent #007bff;
    position:absolute;
}
.big-triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 80px 0 80px 100px;
    border-color: transparent transparent transparent #fff;
    position:absolute;
    top:-17px;
}
.rectangle {
    background-color:#007bff;
    width:300px;
    height:125px;
    position:absolute;
}
.hidden-div {
    width:300px;
    height:110px;
    position:absolute;
    left:50px;
}