HTML – 是否可以在圆圈周围放置项目？

概述我正在尝试制作一个圆圈并在其周围放置3个相等的部分. 我在网站上看到了下面的图片,但我想要三个等于一部分,而不是四个. 我希望它们(部件)就像一个按钮.如果有人点击它们,他们将引用另一页. 我尝试了很多但没有成功.我的目标是圈子周围的每个按钮都会引用另一个页面.是否可以使用HTML和CSS来实现？如果是,怎么样？ 使用CSS： 创建此形状的一种纯CSS方法是使用CSS倾斜变换.由于您需要在零件上单 我正在尝试制作一个圆圈并在其周围放置3个相等的部分.
我在网站上看到了下面的图片,但我想要三个等于一部分,而不是四个.

我希望它们(部件)就像一个按钮.如果有人点击它们,他们将引用另一页.

我尝试了很多但没有成功.我的目标是圈子周围的每个按钮都会引用另一个页面.是否可以使用HTML和CSS来实现？如果是,怎么样？

解决方法 使用CSS：

创建此形状的一种纯CSS方法是使用CSS倾斜变换.由于您需要在零件上单击事件,因此最好使用单独的元素而不是使用伪元素.

.outer {  position: relative;  height: 200px;  wIDth: 200px;  border-radius: 50%;  border: 2px solID;  overflow: hIDden;}.inner {  position: absolute;  height: 50%;  wIDth: 50%;  top: calc(25% - 2px);  left: calc(25% - 2px);  border-radius: 50%;  background: yellowgreen;  border: 2px solID;}.part {  position: absolute;  height: 100%;  wIDth: 100%;}.part:nth-child(2) {  top: -50%;  left: calc(-50% - 2px);  transform: skewY(-30deg);  transform-origin: right bottom;  background: red;  border: 2px solID;  }.part:nth-child(3) {  top: -50%;  right: calc(-50% - 2px);  transform: skewY(30deg);  transform-origin: left bottom;  background: green;  border: 2px solID;}.part:nth-child(1) {  top: 0%;  left: 0%;  wIDth: 100%;  background: yellow;}.part:hover {  background: chocolate;}.part:nth-child(1) p{  position: absolute;  top: 85%;  left: 50%;  transform: translateX(-50%) translateY(-100%);}.part:nth-child(2) p{  position: absolute;  top: 50%;  left: 55%;  transform: skewY(30deg);}.part:nth-child(3) p{  position: absolute;  top: 50%;  left: 30%;  transform: skewY(-30deg);}

<div class='outer'>  <div class='part'><p>Text</p></div>  <div class='part'><p>Text</p></div>  <div class='part'><p>Text</p></div>  <div class='inner'></div></div>

使用SVG：

我仍然建议使用SVG来创建这样的形状,因为它可以更好地控制圆形及其部分.应通过识别圆上的点来设置路径的坐标.在my answer here中描述了识别圆上点的逻辑.它使用三角法.

svg {  height: 30vw;  wIDth: 30vw;}svg circle {  fill: transparent;  stroke: black;}path {  stroke: black;}#part1 {  fill: green;}#part2 {  fill: yellow;}#part3 {  fill: red;}#inner {  fill: yellowgreen;}#part1:hover,#part2:hover,#part3:hover {  fill: chocolate;}

<svg vIEwBox='0 0 100 100'>  <defs>    <path d='M13.63,71 A42,42 0 0,1 50,8' ID='path1' />    <path d='M50,8 A42,1 86.37,71' ID='path2' />    <path d='M13.63,76 A42,0 86.37,76' ID='path3' />  </defs>  <path d='M50,0 A50,50 0 0,0 7,75 L50,50z' ID='part1' />  <!-- should use trignometry to calculate points - angle = 30deg -->  <path d='M50,1 93,50z' ID='part2' />  <!-- should use trignometry to calculate points - angle = 300deg -->  <path d='M7,75 A50,0 93,50z' ID='part3' />  <!-- should use points calculated for prevIoUs two paths -->  <circle cx='50' cy='50' r='40' ID='inner' />    <text Font-family="Calibri" Font-size="8" x="28">    <textPath xlink:href="#path1">      Tab 1 Text    </textPath>  </text>  <text Font-family="Calibri" Font-size="8" x="28">    <textPath xlink:href="#path2">      Tab 2 Text    </textPath>  </text>    <text Font-family="Calibri" Font-size="8" x="28">    <textPath xlink:href="#path3">      Tab 3 Text    </textPath>  </text>  </svg>

总结

以上是内存溢出为你收集整理的HTML – 是否可以在圆圈周围放置项目？全部内容，希望文章能够帮你解决HTML – 是否可以在圆圈周围放置项目？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。