Can i create this structure using css? - css

Question

Can I create this structure using css? I tried to create this using images, but i need it with css.

Answer 1

Try this, and adapt it to your needs...
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;
}
<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>

Answer 2

You can do, but without rounding
.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;
}
<div class="container">
<div class="title">Title #1</div>
</div>
Live demo - https://jsfiddle.net/yqnc2j44/1/