html中右侧三角形代码,html – 使用CSS边框的三角形和倒三角形

我试图使用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;

}