Косая или скрученная форма границы

#html #css #html5 #css3 #svg

Мне интересно, можно ли создать завернутую или, лучше сказать, скрученную границу
с помощью CSS.    

Эффект, который я хотел бы получить, смотрите ниже, в изображении.   

    

Перевод вопроса: Oblique or twisted border shape
    

Ответы

Ответ 1

Больше мне в голову ни чего не пришло но:



   p{
margin:30px;
transform:translate(100px,50px);
   }

p.arrow {
  display: inline-block;
  width: 250px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  position: relative;
  font-size: 20px;
  z-index: 1;
}

p.arrow:before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

p.arrow:after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background: red;
  position: absolute;
  bottom: 0;
  left: 0;
}

p.arrow:after,
p:before {
  z-index: -100;
}

p.arrow:after {
  transform: skew(-20deg);
}

p.arrow:before {
  transform: skew(20deg);
}

p.trap {
  width: 300px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  position: relative;
  perspective: 200px;
  font-size: 20px;
  color: #eee;
}

p.trap:after,
p.trap:before {
  z-index: -100;
}

p.trap:after {
  content: "";
  display: block;
  width: 100%;
  height: 30px;
  position: absolute;
  top: 8px;
  left: 0;
  background: blue;
}

p.trap:before {
  content: "";
  display: block;
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 8px;
  left: 0;
  background: blue;
}

p.trap:after {
  transform: rotateX(-50deg);
}

p.trap:before {
  transform: rotateX(50deg);
}

   p.center-arrow{
display:block;
width:300px;
height:60px;
line-height:60px;
text-align:center;
position:relative;
perspective:100px;
color:#222;
font-size:20px;
font-weight:900;
}
p.center-arrow span.center-arrow-line{
display:block;
width:350px;
height:20px;
background:red;
border:none;
outline:none;
border-radius:45%;
border-style:solid;
border-width:4px;
border-color:blue;
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
z-index:-1200;
}
p.center-arrow:after,
p.center-arrow:before{
content:"";
display:block;
width:100%;
height:30px;
position:absolute;
left:0;
z-index:-100;
}
p.center-arrow:after{
top:-10px;
background:red;
transform:rotateX(-40deg);
border-style:solid;
border-width:4px;
border-color:blue blue red blue;
}
p.center-arrow:before{
bottom:-10px;
background:red;
transform:rotateX(40deg);
border-style:solid;
border-width:4px;
border-color:red blue blue blue;
}
Такой элемент

Трапеция


  с полосой в центре
  




Пример смотреть желательно в полноэкранном режиме

Демо с background на codepen:  http://codepen.io/Geyan/pen/EWpwVr?editors=1100


Ответ 2

SVG решение:

Самым простым и аккуратным решением было бы использование svg для создания границы.     

  



#container {
  position: relative;
  width: 200px;
  height: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}  

  
  
lorem ipsum





Вы могли бы даже использовать path с квадратичными кривыми Безье для усложнения формы
границы фигуры.     

   



#container {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

  
  
lorem ipsum



  
  
lorem ipsum



  
  
lorem ipsum





Вы можете легко добавить эффект тени.     

   



#container {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

  
  
lorem ipsum



  
  
lorem ipsum



  
  
lorem ipsum





Перевод ответа: Oblique or twisted border shape


Ответ 3

CSS решение:

В качестве альтернативного решения вы всегда можете использовать - :after и :before
псевдоэлементы.
Ширина и высота псевдоэлементов :after и :before - вычислялись с использованием некоторой
базовой тригонометрии.     

    

Прим. переводчика:
 У автора на рисунке ошибка - во второй и третьей формуле сверху.
 Должно быть: opposite side = Sin(45) x Hypotenuse;
 Но результат у автора, тем не менее получился  верный - 21.21px.   

Противоположная сторона - ширина и высота псевдоэлементов :after и :before.
На левой стороне даны верхняя и правая границы, а справа - верхняя и левая границы.
Затем, левый край ленточки был повернут на 45deg, а тот, что справа, был повернут
на -45deg.     



div {
  position: relative;
  text-transform: uppercase;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 27px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  box-sizing: border-box;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: 21.21px;
  height: 21.21px;
  border-top: 3px solid black;
  border-right: 3px solid black;
  transform: rotate(45deg);
  box-sizing: border-box;
  top: 1px;
  left: -9px;
}
div:after {
  border-right: 0;
  border-left: 3px solid black;
  left: 100%;
  margin-left: -10px;
  transform: rotate(-45deg);
}
lorem ipsum


    

Перевод ответа: Oblique or twisted border shape


Ответ 4

Пример с использованием clip-path + FF



*{
  box-sizing: border-box;
}
.b-ribbon {    
  position: relative;
  max-width: 400px;
  padding: 25px 10%;
  background-color: tomato;  
  text-align: center;
  color: tomato;
  font-size: 15px;
  font-family: segoe ui, sans-serif;
  -webkit-clip-path: polygon(0 0%, 100% 0, 90% 50%, 100% 100%, 70% 100%, 30% 100%,
0 100%, 10% 50%);
          clip-path: polygon(0 0%, 100% 0, 90% 50%, 100% 100%, 70% 100%, 30% 100%,
0 100%, 10% 50%);   
     -webkit-clip-path: url("#clip-ribbon");
  clip-path: url("#clip-ribbon");   
  transition: .3s;
}
.b-ribbon:before{
  content: '';
  position: absolute; top: 3px; left: 8px; bottom: 3px; right: 8px;
  background-color: #fff;  
  -webkit-clip-path: polygon(0 0%, 100% 0, 90.3% 50%, 100% 100%, 70% 100%, 30% 100%,
0 100%, 9.7% 50%);
          clip-path: polygon(0 0%, 100% 0, 90.3% 50%, 100% 100%, 70% 100%, 30% 100%,
0 100%, 9.7% 50%); 
     -webkit-clip-path: url("#clip-ribbon-inner");
  clip-path: url("#clip-ribbon-inner");      
}
.b-ribbon > span{
  position: relative;
}

.b-ribbon:hover{
  color: royalblue;
  background-color: royalblue;
}

  Text ribbon





Ответ 5

О-о-о-о-о-о... Я смотрю тут никто не знает о clip-path.
Всё легче, чем кажется. 
Но прошу ознакомиться с caniuse.
Ну или если лень, то вот фотка:

Также можешь наметить любые фигуры с помощью этой тулсы.


div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 500px;
  height: 200px;
  background-color: orangered;
  -webkit-clip-path: polygon(0 0%, 100% 0, 85% 50%, 100% 100%, 70% 100%, 30% 100%,
0 100%, 15% 50%);
          clip-path: polygon(0 0%, 100% 0, 85% 50%, 100% 100%, 70% 100%, 30% 100%,
0 100%, 15% 50%);
  color: white;
  font-size: 20pt;
  font-family: Arial, sans-serif;
}

  
Какая чудесная погода...