使用CSS3将Circle分为三个部分

本文介绍了使用CSS3将Circle分为三个部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在做圆，我想将圆分成3个部分，如附加的图像

I am working on circle I want circle divide into 3 part like attached image

每个部分都可以单击，我正在使用HTML5，CSS3和jQuery，是否可以将圆分成3个部分?

Each part will be clickable, I am using HTML5, CSS3 and jQuery, is it possible to divide circle into 3 parts?

.circle { position: relative; border: 1px solid black; padding: 0; margin: 1em auto; width: 430px; height: 430px; border-radius: 50%; list-style: none; overflow: hidden; } li { overflow: hidden; position: absolute; top: 0; right: 0; width: 50%; height: 50%; transform-origin: 0% 100%; } .text { position: absolute; left: -100%; width: 200%; height: 200%; text-align: center; transform: skewY(-60deg) rotate(15deg); padding-top: 20px; } li:first-child { transform: rotate(0deg) skewY(30deg); } li:nth-child(2) { transform: rotate(120deg) skewY(30deg); } li:nth-child(3) { transform: rotate(240deg) skewY(30deg); } li:first-child .text { background: green; } li:nth-child(2) .text { background: tomato; } li:nth-child(3) .text { background: aqua; }

<ul class="circle"> <li> <div class="text">1</div> </li> <li> <div class="text">2</div> </li> <li> <div class="text">3</div> </li> </ul>

推荐答案

希望此代码段对您有所帮助.也许尝试使用jQuery进行悬停.

Hope this snippet helps you a little bit. Maybe try the hover with jQuery.

.circle-outer { position: relative; border: 1px solid black; padding: 0; margin: 1em auto; width: 430px; height: 430px; border-radius: 50%; list-style: none; overflow: hidden; } .circle { position: absolute; border: 1px solid black; padding: 0; margin: 1em auto; width: 580px; height: 580px; border-radius: 50%; list-style: none; overflow: hidden; left: -70px; top: -95px; } li { } li .background { overflow: hidden; position: absolute; top: 0; right: 0; width: 50%; height: 50%; transform-origin: 0% 100%; } .content { position: absolute; z-index: 30; text-align: center; width: 200px; } .content .icon { font-size: 80px; color: #000; } .content.first { left: 15%; top: 30%; } .content.second { right: 15%; top: 30% } .content.third { bottom: 15%; left: 32% } li:first-child .background { transform: rotate(0deg) skewY(30deg); } li:nth-child(2) .background { transform: rotate(120deg) skewY(30deg); } li:nth-child(3) .background { transform: rotate(240deg) skewY(30deg); } li:first-child .background { background: green; } li:nth-child(2) .background { background: tomato; } li:nth-child(3) .background { background: aqua; }

<link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> <div class="circle-outer"> <ul class="circle"> <li> <a href="#"> <div class="content first"> <div class="icon"> <div class="fa fa-search"></div> </div> <p>Text</p> </div> <div class="background"></div> </a> </li> <li> <a href="#"> <div class="content second"> <div class="icon"> <div class="fa fa-search"></div> </div> <p>Text</p> </div> <div class="background"></div> </a> </li> <li> <a href="#"> <div class="content third"> <div class="icon"> <div class="fa fa-search"></div> </div> <p>Text</p> </div> <div class="background"></div> </a> </li> </ul> </div>