在CSS中合並菱形和六角形？
[英]Merging a Diamond and Hexagon Shape in CSS?
問題描述
我正在使用網站上的功能之一是評論。
我想創建一個將六角形和菱形合並的polygon 。
與網站徽標相似。
<div class="release-image-score-wrapper">
<span class="release-image-score-hexagon">
<span class="border-hexagon">
<span class="shadow-cover"></span>
</span>
</span>
<div class="release-image-score-text">9</div>
</div>
任何幫助，將不勝感激。
1 個解決方案
解決方案1
0 已采納 2018-09-14 04:41:58
如果您正在尋找徽標，那么這可能會對您有所幫助。 該徽標的純CSS版本。
.logo { width:30px; height:30px; background-color:white; border:2px solid black; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); } .logo::after { content:''; width:27px; height:27px; background-color:white; position:absolute; border: 1.5px solid orange; outline-style: solid; outline-color: white; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); } .logo::before { content:''; width:20px; height:20px; background-color:white; position:absolute; border:2px solid orange; outline-style: solid; outline-color: white; z-index:1; top:4px; left:3px; } span { width:16px; height:17px; border:1px solid black; position:absolute; z-index:1; top:6px; left:5px; outline-style: solid; outline-color: white; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); font-size:12px; text-align:center; color:orange; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="logo"> <span>M</span> </div> </body> </html>
使用CSS的鑽石形狀布局
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.