只有css的非矩形形状？

Question

我希望将徽标和文字切成矩形，切掉角落。我需要使用SVG还是可以在纯CSS中执行？

funky square shape

我知道它可能使圆，三角形，星形等，在仅适用于CSS，但我有麻烦了编码这种特定的形状了。它的一个矩形切掉了角落。

Answer 1

您将不得不添加一个与背景颜色相同的背景，并使其覆盖要移除的角。从我的评论

Answer 2

例如：

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>

Answer 3

使用::和::之前

爵士小提琴后： 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。一个是彩色版本，所以你可以看到它真的做了什么。