700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html中右侧三角形代码 html – 使用CSS边框的三角形和倒三角形

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

时间:2020-04-08 03:46:04

相关推荐

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;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。