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

#html #css

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


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

    

Ответы

Ответ 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;
}

  

    

    

  
  

    
codepen
    
lotto screem
  



Ответ 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; }
Argentina
5
~
0
Jamaica


Ответ 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);
  
}