css - 如何在圆圈下方放置线条?没有 z-index
问题描述
我用css做了一个带圆圈的X。
圆圈上方有一条绿线,如何将其放在圆圈下方?
这将如何完成?
代码:https ://jsfiddle.net/6wod3pLm/
这就是我在代码中所做的一切。
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: blue;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
}
.exitnew:after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover:before,
.exitnew:hover:after {
background: green;
}
.exitnew b {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid red;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
解决方案
您不需要所有这些代码。这是一个更简单的想法:
.exitnew {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
--b:7px; /* the thickness*/
--c:blue 90deg,green 0; /* the coloration */
background:
conic-gradient(from 90deg at var(--b) var(--b),var(--c))
calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
calc(50% + var(--b)) calc(50% + var(--b));
border: 5px solid red;;
border-radius: 50%;
transform:rotate(45deg);
}
<button class="exitnew" type="button" aria-label="Close"></button>
推荐阅读
- excel - 将打印预览保存为 PDF
- javascript - Axios Bearer 令牌头
- python - 查找具有最多匹配字母的单词
- python - 一种查找是否存在同名下的多个键的方法?
- javascript - Firebase中匿名身份验证最安全的读写规则是什么?
- google-cloud-platform - Stackdriver 日志记录 | 缺少 TraceId 和 SpanId
- amazon-web-services - AWS EC2:如何从仪表板检查磁盘大小和使用情况?
- java - 输入特定字符串后如何在java中停止while循环?
- c# - xaml/wpf TabControl 如何使用 100% 的屏幕进行拉伸
- asp.net - 如何在 ASP.NET webapp 中的服务器和客户端之间进行通信?