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

概述我试图使用CSS边框实现以下图像示例.这可能吗？此外,它是否也可以响应？我开始了一个小提琴 here.我知道我已经在某个地方见过,但不记得在哪里. 这是我到目前为止 – HTML <div class="container"> <div class="row"> <div class="sign-up col-sm-9"> <div class 我试图使用CSS边框实现以下图像示例.这可能吗？此外,它是否也可以响应？我开始了一个小提琴 here.我知道我已经在某个地方见过,但不记得在哪里.

这是我到目前为止 –

HTML

<div >    <div >        <div >            <div >                <h3>SIGN UP to get the latest updates on Security News</h3>            </div>            <div >            </div>            <div >            </div>        </div>  <!-- /.sign-up -->                  <div ></div>            <div >                <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;}

解决方法 好吧,我试图达到你想要的,请检查这个代码并看看这个 Fiddle

注意：必须使用两个三角形来实现,因为CSS三角形是使用边框绘制的.

HTML：

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

总结

以上是内存溢出为你收集整理的html – 使用CSS边框的三角形和倒三角形全部内容，希望文章能够帮你解决html – 使用CSS边框的三角形和倒三角形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。