2016-09-20 109 views
-1

我希望將徽標和文字切成矩形,切掉角落。我需要使用SVG還是可以在純CSS中執行?只有css的非矩形形狀?

funky square shape

我知道它可能使圓,三角形,星形等,在僅適用於CSS,但我有麻煩了編碼這種特定的形狀了。它的一個矩形切掉了角落。

+0

您可以在CSS中使用僞元素,箱形陰影或背景漸變和背景大小 –

回答

-1

您將不得不添加一個與背景顏色相同的背景,並使其覆蓋要移除的角。從我的評論

1

例如:

div { 
 
    /* demo purpose */ 
 
    margin:0.5em; 
 
    height:100px; 
 
    width:100px; 
 
    display:inline-flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    /* end demo purpose, use your own display and sizes */ 
 
    background: 
 
    linear-gradient(45deg, transparent 10px, black 10px, black 40%, transparent 40%), 
 
    linear-gradient(225deg, transparent 10px, black 10px, black 40%, transparent 40%), 
 
    linear-gradient(-225deg, transparent 10px, black 10px, black 40%, transparent 40%), 
 
    linear-gradient(-45deg, transparent 10px, black 10px, black 40%, transparent 40%), 
 
    linear-gradient(0deg, transparent 30%, black 30%, black 70%, transparent 70%); 
 
    color:lightgray; 
 
    position:relative; 
 
    font-size:40px; 
 
    } 
 
div:after { 
 
    content:''; 
 
    padding:5px; 
 
    border:5px solid black; 
 
    position:absolute; 
 
} 
 
/* Now fill up any corner from a class */ 
 
div.green:after { 
 
    background:lime; 
 
    bottom:0; 
 
    right:0; 
 
} 
 
div.red:after { 
 
    background:tomato; 
 
    top:0; 
 
    right:0; 
 
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="green"> 
 
    <i class="fa \t fa-mobile"></i> 
 
</div> 
 
<div class="red"> 
 
    \t <i class="fa fa-crosshairs"></i> 
 
</div>

0

使用::和::之前

爵士小提琴後: https://jsfiddle.net/ymympva0/

.weird-shape:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 29px solid black; 
    border-left: 29px solid white; 
    border-right: 29px solid white; 
    width: 42px; 
    height: 0; 
} 

.weird-shape:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid black; 
    border-left: 29px solid white; 
    width: 42px; 
    height: 0; 
} 

我已經包括2十八ES。一個是彩色版本,所以你可以看到它真的做了什麼。