css+HTML 实现倒角

【摘自】CSDN

三角

css+HTML 实现倒角

!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.container {

width: 500px;

margin: 100px auto;

}

.triangle {

width: 0px;

height: 0px;

border-left: 50px solid red;

border-right: 50px solid blue;

border-top: 50px solid yellow;

border-bottom: 50px solid green;

}

.corner {

width: 0px;                 

height: 0px;

border: 50px solid yellow;

border-bottom-color: transparent;   

border-left-color: transparent;

border-right-color: transparent;

}

</style>

</head>

 

<body>

<div class="container">

<div class="triangle">四边形</div>

</div>

 

<div class="container">

<div class="corner">倒三角</div>

</div>

</body>

</html>

 

--------------------- 

作者:siyi_blog 

来源:CSDN 

原文:https://blog.csdn.net/siyi_blog/article/details/81080422 

版权声明:本文为博主原创文章,转载请附上博文链接!


简要

点赞

发表评论

电子邮件地址不会被公开。 必填项已用 *标注