Вёрстка трапеции с рамками и тенями

221

10 мая 2019, 15:00

Можно ли получить вот такой блок используя css ?

еще текст внутри должен быть на красном фоне и на зеленом... Как можно такое сделать ? Пробывал нечего не получается Буду рад ответу.

Answer 1

Если такой вариант устроит то вот Демо

.items { 
  width: 800px; 
  height: 200px; 
  margin: auto; 
  border: 1px solid transparent; 
  perspective: 400px; 
  position: relative; 
} 
 
.item { 
  width: 500px; 
  height: 100px; 
  margin: 50px auto; 
  transform: rotateX(60deg); 
  display: flex; 
  outline: 1px solid; 
  padding: 20px; 
} 
 
.item1, 
.item2 { 
  width: 100%; 
  filter: blur(10px); 
} 
 
.item1 { 
  background: red; 
} 
 
.item2 { 
  background: green; 
} 
 
.mask { 
  width: 50%; 
  transform: translateX(50%); 
  height: 100%; 
  position: absolute; 
  top: 10%; 
  left: 0; 
  display: flex; 
  align-items: center; 
  justify-content: space-around; 
}

<div class="items"> 
  <div class="item"> 
    <div class="item1"></div> 
    <div class="item2"></div> 
  </div> 
  <div class="mask"> 
    <h2>codepen</h2> 
    <h2>lotto screem</h2> 
  </div> 
</div>

Answer 2

Как-то так... Жаль, что не адаптивно:

.vs_label { 
  position: relative; 
  display: flex; 
  flex-flow: nowrap; 
  justify-content: space-around; 
  align-content: center 
  height: 44px; 
  width: 796px; 
  margin: 100px auto; 
  font: bold 40px/1.1em 'Arial Black'; 
  text-align: center; 
  color: #eee; 
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 1px 2px rgba(255, 255, 255, 0.4); 
} 
 
.vs_label::before { 
  content: ''; 
  position: absolute; 
  z-index: -1; 
  top: -8px; 
  left: 50%; 
  height: 53px; 
  width: 832px; 
  background: #ccc; 
  border: 4px solid #b3b3b3; 
  transform-origin: center; 
  transform: translateX(-50%) perspective(157px) rotateX(17deg); 
  box-shadow: 0px 35px 25px -25px rgba(0, 0, 0, 0.3), inset 0 1px 1px 1px #fdfdfd; 
} 
 
.vs_label::after { 
  content: ''; 
  position: absolute; 
  z-index: -1; 
  top: -1px; 
  left: 50%; 
  height: 48px; 
  width: 866px; 
  transform-origin: center; 
  transform: translateX(-50%); 
  -webkit-clip-path: polygon(calc(0% + 38px) 0%, calc(100% - 38px) 0%, 100% 100%, 0% 100%); 
  clip-path: polygon(calc(0% + 38px) 0%, calc(100% - 38px) 0%, 100% 100%, 0% 100%); 
  background-image: linear-gradient(90deg, rgba(0, 180, 0, 0.3) 35%, #999, #999, hsla(0, 70%, 50%, 0.3) 65%), repeating-linear-gradient(135deg, #666, #8c8c8c 1.5px, #b3b3b3 0, #bfbfbf 3px); 
  background-size: auto auto, 4.3px 4.6px; 
  background-repeat: no-repeat, repeat; 
} 
 
.vs_label div:nth-child(4n+1) { font: bold oblique 30px/1.5em 'Trebuchet MS'; } 
 
body { background: url('https://pp.userapi.com/c850520/v850520068/4dd6f/AxIKX0-LdnE.jpg') center top no-repeat; }

<div class="vs_label"><div>Argentina</div><div>5</div><div>~</div><div>0</div><div>Jamaica</div></div>

Answer 3

вариант с clip-path:

* { 
  box-sizing:border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
.box { 
  width: 100%; 
  height: 50px; 
  position: relative; 
  background: #000; 
  padding: 2px; 
   
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); 
          clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); 
} 
 
.box:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: #ccc; 
  z-index: 2; 
   
   
   
   
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); 
          clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); 
   
} 
 
.box:before { 
  content: ''; 
  position: absolute; 
  z-index: 3; 
  top: 2px; 
  left: 2px; 
  right: 2px; 
  bottom: 2px; 
  background:#fff; 
   
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 98.75% 100%, 1.25% 100%); 
          clip-path: polygon(20% 0%, 80% 0%, 98.75% 100%, 1.25% 100%); 
   
} 
 
.box-inner { 
  position: absolute; 
  z-index: 5; 
  top: 0px; 
  left:4px; 
  right:4px; 
  bottom: 0; 
  overflow: hidden;  
   
  -webkit-clip-path: polygon(22% 0%, 78% 0%, 98.75% 100%, 1.25% 100%); 
          clip-path: polygon(22% 0%, 78% 0%, 98.75% 100%, 1.25% 100%); 
} 
 
.box-x { 
  z-index: 3; 
  position: absolute; 
  top:4px; 
   
  bottom: 4px; 
  overflow: hidden;  
} 
 
.box-left { 
  left: 4px; 
  right: 50%; 
   
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 49.9%, #fff 49.9%, #fff 60%, rgba(0, 0, 0, 0) 60%), linear-gradient(-45deg, #fff 10%, rgba(0, 0, 0, 0) 10%); 
  background-size: 2px 2px; 
  background-color: #66976a; 
   
  -webkit-clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 2.5% 100%); 
          clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 2.5% 100%); 
} 
 
.box-right { 
  right: 4px; 
  left: 50%; 
   
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, #fff 49.9%, #fff 60%, rgba(0, 0, 0, 0) 60%), linear-gradient(45deg, #fff 10%, rgba(0, 0, 0, 0) 10%); 
  background-size: 2px 2px; 
  background-color: #a77375; 
   
  -webkit-clip-path: polygon(0% 0%, 80% 0%, 97.5% 100%, 0% 100%); 
          clip-path: polygon(0% 0%, 80% 0%, 97.5% 100%, 0% 100%); 
} 
 
.box-center { 
  z-index: 5; 
  width: 30%; 
  left: 50%; 
  overflow: hidden; 
  top:4px; 
  bottom: 4px; 
   
  transform:translateX(-50%); 
} 
 
.box-center:after { 
  content:''; 
  position: absolute; 
   
  top: -55px; 
  bottom: -55px; 
  left: 0px; 
  right: 0px; 
  background: radial-gradient( 
    circle closest-side, 
    #888,  
    #9a9a9a,  
    rgba(255,255,255,0) 
  ); 
} 
 
.box-center:before { 
  content:''; 
  position: absolute; 
  z-index: 5; 
  top:6px; 
  bottom: 6px; 
  left: 50%; 
  width: 2px; 
  margin-left: -1px; 
  background: rgba(255,255,255,.75); 
   
}

  <div class="box"> 
    <div class="box-inner"> 
      <div class="box-x box-left"></div> 
 
      <div class="box-x box-center"></div> 
 
      <div class="box-x box-right"></div> 
    </div> 
  </div>