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

debugcn 发表于 Dev

这家伙

我正在尝试使用CSS边框实现以下图像示例。这可能吗？另外，它是否也可能会做出响应？我在这里开小提琴。我知道我在某个地方见过这个，但不记得在哪里。

在此处输入图片说明

这是我到目前为止所拥有的-

的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-

.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;
}

默希德·艾哈迈德（Murshid Ahmed）

好吧，我已尝试实现您想要的功能，请检查此代码并查看此小提琴

注意： 由于CSS三角形是使用边框绘制的，因此必须使用两个三角形来实现。

HTML：

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

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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。