可以呀。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>css 12等分圆</title>
</head>
<style type="text/css">
.container {
position: relative
width: 200px
height: 200px
overflow: hidden
border: 2px outset deeppink
border-radius: 50%
margin:5em auto
}
.layer {
position: absolute
transform-origin: left top
left: 100px
top: 100px
width: 100px
height: 100px
border: 1px solid white
box-sizing: border-box
}
</style>
<script type="text/javascript">
onload = function () {
[].slice.call(document.querySelectorAll('.layer'), 0).forEach(function (item, i) {
item.style.backgroundColor = '#' + (~~(Math.random() * (1 << 24))).toString(16)
item.style.transform = 'rotate(' + 360 / 12 * (i + 1) + 'deg)skewX(60deg)'
})
}
</script>
<body>
<div class="container">
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
</div>
</body>
</html>
<html><head>
<title></title>
<style type="text/css">
.content{display: none}
</style>
</head>
<body>
<span>设为终点</span><span>设为起点</span><span>搜索附近</span>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<script>
var _span=document.getElementsByTagName("span")
var _div=document.getElementsByTagName("div")
for (var i = 0,len=_span.lengthi <leni++) {
_span[i].index=_div[i].index=i
_span[i].onclick=function(){
var ind=this.index
if (_div[ind].className=="content") {
for(var j=0j<lenj++){
_div[j].className="content"
}
_div[ind].className=""
}else{
_div[ind].className="content"
}
}
}
</script>
</body>
</html>
戳我获取 完整源码
