今天简单的说一下三角形和圆形的css实现方式
一,三角形如何实现
<style>
.box{
font-size: 18px;
color: red;
line-height: 30px;
font-weight: bold;
padding: 10px;
margin: 10px;
width: 100px;
height: 100px;
cursor: e-resize;
border: 1px solid #ccc;
}
.sector{
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: #f00 transparent transparent ;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="sector">
</div>
注意border-width和border-radius的值是一样的才可以
二,三角形
<style>
.box{
font-size: 18px;
color: red;
line-height: 30px;
font-weight: bold;
padding: 10px;
margin: 10px;
width: 100px;
height: 100px;
cursor: e-resize;
border: 1px solid #ccc;
}
.sector{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent #f00 ;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="sector">
</div>
</body>
</html>
代码基本一致,这里注意的是border-radius没有设置,并且这次我隐藏的是上边框和左右
分享完毕 欢迎讨论和学习