Наклонные углы на верхней левой / нижней правой стороне div

0

Изображение 174551

Как мы можем создать эту форму в чистом css?

Теги:
css-shapes

3 ответа

2
Лучший ответ

Вы можете сделать это следующим образом:

HTML

<div class="topleft">
    <div class="buttomright"></div>
</div>

и css

div {
    height: 300px;
    background: silver;
    position: relative;
}
.topleft:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;

    border-top: 80px solid white;
    border-right: 80px solid silver;
    width: 0;
}

    .buttomright:before {
        content:'';
        position: absolute;
        bottom: 0;
        right: 0; 
        border-bottom: 80px solid white;
        border-left: 80px solid silver;
        width: 0;
    }

см. JSFiddle

1

http://jsfiddle.net/b48AK/

  body {background: #8aa; padding:0px; margin:0px}
#outer {
  background: #fff;
  position:relative;
  margin:15px;
} 

#outer:before { 
  content: ""; 
  height: 100%;
  left: -15px;
  position: absolute;  
  border-top: 15px solid transparent;
  border-right: 15px solid #fff;
} 

#outer:after { 
  content: ""; 
  width: 100%;
  height: 100%;
  top: -15px;
  left: 100%;
  position: absolute; 
  border-left: 15px solid #fff;
  border-bottom: 15px solid transparent;
} 

#outer span:before {
  display: block;
  content: "";
  width: 100%;
  top: -15px;
  left: 0;
  position: absolute;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}

#outer span:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 100%;
  left: -15px;
  position: absolute;
  border-top: 15px solid #fff;
  border-right: 15px solid transparent;
}
0

CSS3 linear-gradient() может нарисовать эту форму на фоне:

div {
  background-image: linear-gradient(135deg, transparent 20px, silver 20px),
                    linear-gradient(-45deg, transparent 20px, silver 20px);

  background-repeat: no-repeat;
  background-position: 0 0, 50% 0;
  background-size: 50% 100%;
}

body {
  background: linear-gradient(orange, red);
  min-height: 100vh;
  margin: 0;
}
div {
  background-image: linear-gradient(135deg, transparent 20px, silver 20px),
                    linear-gradient(-45deg, transparent 20px, silver 20px);

  background-repeat: no-repeat;
  background-position: 0 0, 50% 0;
  background-size: 50% 100%;
  height: 150px;
  width: 500px;
  margin: 20px;
}
<div>

</div>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню