您的位置：首页 > Web前端 > CSS

css css编写三角形和半圆

2017-08-16 11:38 387 查看


三角的四个方向可修改，根据：border-top-color:;   border-bottom-color:;  border-left-color:;  border-right-color:;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角形</title>
<style>
.icon-b {
display: inline-block;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-color: #2fa0ec;
position: relative;
left: 3px;
top: 2px;
}
</style>
</head>
<body>
<b class="icon-b"></b>
</body>
</html>




<style>    .semicircle {         display: inline-block;         width:18px;         height:29px;         border-radius:18px 0 0 18px;/* 左上、右上、右下、左下 */         border:1px solid #feb34a;         border-right: #fff;         position: relative;         top: 10px;         right: -7px;    }</style><span class="semicircle"></span>border-right设置右边线为白色；可改变为右图。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航