我在网站上看到了下面的图片,但我想要三个等于一部分,而不是四个.
我希望它们(部件)就像一个按钮.如果有人点击它们,他们将引用另一页.
我尝试了很多但没有成功.我的目标是圈子周围的每个按钮都会引用另一个页面.是否可以使用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 – 是否可以在圆圈周围放置项目?所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)