首页 > 代码库 > 平行四边形与梯形
平行四边形与梯形
效果图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.para {
display: inline-block;
color: #fff;
padding: 0 10px;
position: relative;
height: 30px;
line-height: 30px;
margin-left: 10px;
background: red;
}
.para:before {
content: ‘‘;
display: block;
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 15px 5px;
top: 0;
left: -10px;
border-color: transparent yellow deepskyblue transparent;
}
/*如果没有after则是一个梯形*/
.para:after {
content: ‘‘;
display: block;
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 15px 5px;
top: 0;
right: -10px;
border-color: blue transparent transparent lawngreen;
}
</style>
</head>
<body>
<div class="para">上海</div>
<div class="para">北京</div>
<div class="para">杭州</div>
</body>
</html>
第二种方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;
}
#div2 {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: red green blue brown;
}
#div3 {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: red transparent transparent transparent;
}
.city{
display: inline-block;
padding: 6px 25px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-25deg);
}
.city1{
display: inline-block;
padding: 6px 25px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-25deg);
}
.city1 div{
transform: skew(25deg);
}
</style>
</head>
<body>
<div id="div1"></div>
<br />
<div id="div2"></div>
<br />
<div id="div3"></div>
<br />
<span class="city">上海</span>
<span class="city">北京</span>
<span class="city">广州</span>
<span class="city">杭州</span>
<br />
<br />
<br />
<span class="city1">
<div>上海</div>
</span>
<span class="city1">
<div>北京</div>
</span>
<span class="city1">
<div>广州</div>
</span>
<span class="city1">
<div>杭州</div>
</span>
</body>
</html>
平行四边形与梯形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。