1

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

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Archana Sharma
  • 1,953
  • 6
  • 33
  • 65
  • 1
    No, use image for that curved line – Justinas Jan 30 '17 at 13:13
  • 1
    check this first answer http://stackoverflow.com/questions/27777470/wave-or-shape-with-border-on-css3 – Karuppiah RK Jan 30 '17 at 13:14
  • It may possible to achieve this using CSS. But you would end up in slicing that image into multiple elements. You would end up with a very error prone solution. Especially when it comes to different browser. You should to it with images (maybe two, one for the green part and one for the other). – Eytibi Jan 30 '17 at 13:16
  • 2
    Here’s an explanation to achieve something similar using SVG: https://css-tricks.com/svg-tabs-using-svg-shape-template/ – CBroe Jan 30 '17 at 13:19

2 Answers2

1

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/

Huangism
  • 16,278
  • 7
  • 48
  • 74
grinmax
  • 1,835
  • 1
  • 10
  • 13
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>
Huangism
  • 16,278
  • 7
  • 48
  • 74
Juan D. Gómez
  • 479
  • 1
  • 7
  • 21