CSS以外の長方形以外の形状ですか？

Question

私は、コーナーが切り取られた四角形のロゴとテキストを持っています。私はSVGを使用する必要がありますか、それとも純粋なCSSで行うことはできますか？

funky square shape

私は三角形、円を作るためにその可能性を知っている、唯一のCSSでなどの星が、私は、この特定の形状までをコーディング問題を抱えています。その角が切られた四角形。

Answer 1

あなたは、画像の背後にある色と同じ背景を持つdivを追加し、除外したい隅を覆わなければなりません。私のコメントから

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

使用::と::

のjsフィドル前後： 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。 1つは色付きバージョンなので、実際に何が表示されているかを確認できます。