我沒有成功為此創建合適的 Fiddle 或 codepen，所以我希望這些資訊在 Inspector 中足以讓我知道我正在嘗試去哪里。
有什么方法可以完美地對齊這些，以便圖示中間的插入符號是白色的？
uj5u.com熱心網友回復：
使用
::before一起::after。
例子：
* {
box-sizing: border-box;
}
.bg {
background-color: rgba(0, 0, 0, 0.6);
padding: 10px;
position: relative;
height: 100px;
width: 300px;
}
.mybtn {
color: #008ed4;
display: block;/* required */
font-size: 40px;/* for font awesome or font icon size */
height: 40px;/* required */
left: 50%;/* for positioning on center, middle */
position: absolute;/* for positioning on center, middle */
text-decoration: none;
transform: translate(-50%, -50%);/* for positioning on center, middle */
top: 50%;/* for positioning on center, middle */
width: 40px;/* required */
}
.mybtn::before {
background-color: #fff;
border-radius: 50%;
content: "";
display: block;
height: 30px;/* required, must smaller than icon size */
left: 50%;/* required */
position: absolute;/* required */
top: 50%;/* required */
transform: translate(-50%, -50%);/* required for center, middle white background */
width: 30px;/* required, must smaller than icon size */
z-index: 1;/* required for put background to bottom layer */
}
.mybtn::after {
content: "\f144";/* for font awesome icon */
font-family: "Font Awesome 5 Free";/* for font awesome icon */
font-weight: 900;/* for font awesome icon */
position: absolute;/* required */
z-index: 2;/* required for pull icon to top layer */
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="bg">
<a class="mybtn" href="#"></a>
</div>雙方::before并::after從頂部自己的位置，留下了他們的元素的開始。您必須正確放置它們并用于z-index將它們分層。
白色背景層必須小于圖示層，以防止它看起來像邊框。
在 jsfiddle 上查看它的實際效果。
uj5u.com熱心網友回復：
你可以在 HTML、CSS 中嘗試這個簡單的解決方案
.slider-container{
height: 4rem;
width: 4rem;
background: #008ED4;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}
.caret{
width: 0;
height: 0;
margin-left:0.3rem;
border-top: 1rem solid transparent;
border-left: 2rem solid #fff;
border-bottom: 1rem solid transparent;
}<div class="slider-container">
<div class="caret"></div>
</div>此外，要在 CSS 中輕松制作任何形狀，請嘗試參考
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375035.html
下一篇：垂直交錯div