我可以用css創建這個結構嗎？

Question

我可以用css創建這個結構嗎？我試圖用圖像創建這個，但我需要它與CSS。

Answer 1

你可以做，但沒有四捨五入

<div class="container"> 
    <div class="title">Title #1</div> 
</div> 

.container { 
    border-top: solid 10px red; 
} 

.title { 
    float: right; 
    height: 30px; 
    padding: 0 40px 0 30px; 
    background-color: red; 
    position: relative; 
} 
.title:before { 
    content: ''; 
    border: solid 30px transparent; 
    border-top-color: red; 
    position: absolute; 
    left: -30px; 
    top: 0; 
} 

現場演示 - https://jsfiddle.net/yqnc2j44/1/

Answer 2

試試這個，它ADAT您的需要......

HTML

<div class="tabs"> 
    <div class="tab"><div class="tab-box"></div></div> 
    <div class="tab"><div class="tab-box"></div></div> 
    <div class="tab active"><div class="tab-box"></div></div> 
    <div class="tab"><div class="tab-box"></div></div> 
</div> 
<div class="content"></div> 

CSS：

body { 
    padding: 100px; 
} 

.tabs { 
    height: 45px; 
    padding: 0 0 0 0; 
    overflow: visible; 
} 

.tab { 
    width: 200px; 
    height: 45px; 
    overflow: hidden; 
    float: left; 
    margin: 0 -15px 0 0; 
} 

.tab-box { 
    height: 50px; 
    background: #fff; 
    border-radius: 4px; 
    border: 1px solid #ccc; 
    margin: 0 10px 0; 
    box-shadow: 0 0 2px #fff inset; 
    -webkit-transform: perspective(100px) rotateX(30deg); 
    -moz-transform: perspective(100px) rotateX(30deg); 
} 

.tab.active { 
    z-index: 40; 
    position: relative; 
    padding-bottom: 1px; 
} 

.tab.active .tab-box { 
    background-color: #eee; 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMyUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); 
    background-size: 100%; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(3%, #dddddd), color-stop(100%, rgba(238, 238, 238, 0.5))); 
    background-image: -moz-linear-gradient(top, #cccccc, #dddddd 3%, rgba(238, 238, 238, 0.5)); 
    background-image: -webkit-linear-gradient(top, #cccccc, #dddddd 3%, rgba(238, 238, 238, 0.5)); 
    background-image: linear-gradient(to bottom, #cccccc, #dddddd 3%, rgba(238, 238, 238, 0.5)); 
    box-shadow: 0 0 2px 0 #fff inset; 
} 

.content { 
    z-index: 1; 
    padding: 100px; 
    border: 1px solid #ccc; 
    background: #eee; 
    position: relative; 
} 

.clear { 
    clear: both; 
}