我试图使用CSS边框实现以下图像示例.这可能吗?此外,它是否也可以响应?我开始了一个小提琴
here.我知道我已经在某个地方见过,但不记得在哪里.
这是我到目前为止 –
HTML
SIGN UP to get the latest updates on Security News
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;
}