gpt4 book ai didi

html - 带 CSS 和 HTML 的四分之一圆环

转载 作者:太空狗 更新时间:2023-10-29 15:38:13 38 4
gpt4 key购买 nike

我正在尝试在 CSS 中创建一个环形,分为 4 个部分。每个季度代表一个按钮。

我一直在研究以下代码:

#quarterCircleTopLeft{
width:100px;
height:100px;
border:1px solid #000;
background: orange;
border-radius: 90px 0 70px 0;
-moz-border-radius: 90px 0 70px 0;
-webkit-border-radius: 90px 0 70px 0;
}

产生这个(忽略灰线):

enter image description here

显然,我希望右下角的边框反转。但是,由于这是一个按钮,我不能使用其他形状来生成切口(因为这会与菜单的其他按钮重叠)。我添加了一条红线来大致显示我希望边框如何走。对不起,我的绘画技术很差:-P

如何反转边框或以其他方式生成我想要的形状?

最佳答案

我会做类似的事情:

http://dabblet.com/gist/5476973

简而言之,大量的边界半径 + 一切之上的白色圆圈。

在我的示例中,我会使用 javascript 将点击事件绑定(bind)到 div 上,或者将它们全部设为 <a>元素并添加一个 display:block; .

/**
* Quarter Circles
*/

.main {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
.quarter {
position: absolute;
width: 50%;
height: 50%;
transition: background-color 0.2s ease-in-out;
}
.quarter:hover {
background-color: pink;
}
.quarter1 {
top: 0;
left: 0;
background-color: red;
border-radius: 100% 0 0 0;
}
.quarter2 {
top: 0;
right: 0;
background-color: blue;
border-radius: 0 100% 0 0;
}
.quarter3 {
bottom: 0;
left: 0;
background-color: orange;
border-radius: 0 0 0 100%;
}
.quarter4 {
bottom: 0;
right: 0;
background-color: green;
border-radius: 0 0 100% 0;
}
.cutout {
width: 50%;
height: 50%;
background-color: white;
position: absolute;
top: 25%;
left: 25%;
border-radius: 50%;
pointer-events: none;
}
<div class="main">
<div class="quarter quarter1"></div>
<div class="quarter quarter2"></div>
<div class="quarter quarter3"></div>
<div class="quarter quarter4"></div>
<div class="cutout"></div>
</div>

关于html - 带 CSS 和 HTML 的四分之一圆环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16263358/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com