-4
A
回答
1
「圈子」,在下面的例子中沒有完全相同相同的形狀,你的形象。這是可能的,但至少下面的內容會讓你開始。
UL.circle-menu {
list-style: none;
padding: 0;
}
UL.circle-menu LI {
display: block;
float: left;
width: 115px;
text-align: center;
background-color: #3f48cc;
}
UL.circle-menu LI .circle {
display: block;
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
margin: 0 auto;
position: relative;
top: 2px;
padding-top: 22px;
box-sizing: border-box;
}
UL.circle-menu LI .connector {
display: block;
width: 30px;
height: 15px;
background-color: white;
margin: 0 auto;
position: relative;
}
UL.circle-menu LI .connector::before,
UL.circle-menu LI .connector::after {
content: "";
display: block;
position: absolute;
width: 15px;
height: 15px;
background-color: #3f48cc;
border-radius: 50%;
}
UL.circle-menu LI .connector::before {
left: -7px;
}
UL.circle-menu LI .connector::after {
left: 22px;
}
UL.circle-menu LI .menu-text {
display: inline-block;
width: 115px;
background-color: white;
padding: 10px;
font-family: sans-serif;
font-size: 16px;
color: #c3c3c3;
box-sizing: border-box;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<ul class="circle-menu">
<li>
<div class="circle">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</div>
<div class="connector"></div>
<div class="menu-text">Home</div>
</li>
<li>
<div class="circle">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</div>
<div class="connector"></div>
<div class="menu-text">Home</div>
</li>
<li>
<div class="circle">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</div>
<div class="connector"></div>
<div class="menu-text">Home</div>
</li>
</ul>
0
我認爲實現這一目標的最好方法是使用SVG濾鏡。你正在談論一個已經存在的效果,它被稱爲Goo。
.menu{
filter:url('#shadowed-goo');
position:absolute;
left:0;
padding-top:20px;
padding-left:50px;
width:100px;
height:100px;
box-sizing:border-box;
font-size:20px;
text-align:left;
}
.menu-item{
border-radius:100%;
width:80px;
height:80px;
position:absolute;
top:20px;
text-align:center;
line-height:80px;
background:#f62;
left:10px;
}
.home{
width:100px;
position:absolute;
text-align:center;
top:113px;
left:0;
background:#f62;
height:100px;
}
<nav class="menu">
<a href="#" class="menu-item"></a>
<div class="home">home</div>
</nav>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feBlend in2="shadow" in="goo" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
盧卡斯Bebber有這個驚人的Codepen serie與SVG過濾完成,並通過CSS應用。
相關問題
- 1. 不規則形狀
- 2. CSS中的不規則形狀
- 3. 將不規則形狀擬合成圓形
- 4. 不規則的矩形形狀
- 5. jQuery圓形菜單
- 6. 當新形狀在加工時形成不規則形狀
- 7. CSS定義形狀橢圓
- 8. 使用不規則形狀按鈕的簡單方法
- 9. 獲取不規則形狀的最佳橢圓擬合
- 10. 錯誤的圓形菜單
- 11. 圓形到圓形三角形(菜單按鈕切換)
- 12. 造型不規則形狀的按鈕
- 13. 形狀不規則的UIBezierPath填充
- 14. PDF中的不規則形狀區域
- 15. Android佈局中的不規則形狀
- 16. CSS/HTML |菜單轉換:圓形到方形
- 17. Opengl不規則形狀顏色填充
- 18. 不規則形狀碰撞檢測
- 19. OpenCV - 檢測圓形形狀
- 20. 帶有圖形不規則形狀的網格
- 21. 在HTML/HTML5中使用JS的不規則錨點和形狀
- 22. 將不規則形狀裁剪成矩形
- 23. 在不規則形狀多邊形內獲取緯度/深度
- 24. iOS石英2D圖形填充不規則形狀模糊
- 25. 算法以適應矩形最少到不規則形狀
- 26. 使用houghcircle函數檢測不規則形狀opencv python
- 27. 樹形菜單中的圓角
- 28. Flex 3:帶有PopUpButton的圓形菜單
- 29. 用圓圈繪製形狀
- 30. 用css繪製不規則的形狀(應該是響應式的)