it-swarm.com.ru

Как добиться скошенных углов CSS, а не закругленных углов?

С помощью свойства CSS border-radius у меня может быть изогнутый закругленный край границы в конце.

.boxLeft{
    border-right: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 10px 0;
}

.boxRight{
    border-left: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 0 10px;
}

Но я хочу границу, как на картинке ниже. Что мне делать, если у меня есть две коробки (желтая и розовая), встречающиеся друг с другом, и я хочу иметь резкий угол в нижней точке встречи (пунктирный угол)?

enter image description here

Возможно ли это с помощью CSS?

13
Mayeenul Islam

Вот способ, хотя у него есть некоторые недостатки, такие как отсутствие границ, и он не прозрачен:

HTML:

<div class="left"></div>
<div class="right"></div>

CSS:

.left,
.right {
    width: 100px;
    height: 100px;
    float: left;
    position: relative;
}

.left {
    background: lightpink;
}
.right {
    background: lightblue;
}

.right::after,
.left::after {
    width: 0px;
    height: 0px;
    background: #fff;
    content: '';
    position: absolute;
    bottom: 0;
}

.right::after {
    left: 0;
    border-top: 10px solid lightblue;
    border-right: 10px solid lightblue;
    border-left: 10px solid white;
    border-bottom: 10px solid white;
}

.left::after {
    right: 0;
    border-top: 10px solid lightpink;
    border-right: 10px solid white;
    border-left: 10px solid lightpink;
    border-bottom: 10px solid white;
}

РЕЗУЛЬТАТ:

enter image description here

Вот скрипка.

10
thordarson

CSS3 Gradients могут сделать свое дело:

Попробуйте это, вот Fiddle:

http://jsfiddle.net/S2nqK/3/

HTML:

    <div>Div 1</div>
    <div>Div 2</div>

CSS:

div {
    background: #c00; /* fallback */
    background:
        -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -o-linear-gradient(135deg, transparent 10px, #c00 10px),
        -o-linear-gradient(225deg, transparent 10px, #c00 10px),
        -o-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}



div {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

/* Ignore the CSS from this point, it's just to make the demo more presentable */


div {
    float:left;
    width: 50px;
    margin:15px auto;
    padding:15px;
    color: white;
    line-height:1.5;
}
9
AlphaMale

Это также возможно, используя «clip-path».

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

Пример здесь ... http://codepen.io/anon/pen/vGWoPv

Поддержку пути клипа можно найти здесь ... http://caniuse.com/#search=clip-path

4
Collins

У меня есть один

<div class="left"></div>
<div class="right"></div>

и это CSS

.left,
.right {
    width: 100px;
    height: 100px;
    float: left;
    position: relative;
    overflow:hidden;
}

.right::after,
.left::after {
    content: '';
  width:200px;
  height:200px;
  position:absolute;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.right::after {
  background: lightblue;
  left:-40px;
  top:-100px;
}

.left::after {
  background: lightpink;
  left:-60px;
  top:-100px;
}

это то что нужно, прозрачность и все

3
Bruno

Хороший Лучшее способ архивировать это: border-images . В сочетании с .svg хорошим решением ... 

2
gearsdigital

++ Включает пользовательский интерфейс Westworld Style в CSS ++ 

Я обновил удивительный ответ AlphaMale на взломать скошенные границы в соответствии с первоначальной просьбой. Он в основном использует один скошенный div с немного меньшим внутри. Цвет фона внешнего элемента div становится цветом границы, когда остальная его часть покрыта внутренним элементом div с соответствующими фасками.

Протестировано в Edge, Chrome и Firefox.

Я нашел эту страницу, пытаясь продублировать что-то вроде пользовательского интерфейса Westworld с неравными скошенными углами. Посмотрите на скрипку JS, чтобы узнать, как я это сделал, вместе с цветовой схемой и блоком примеров из сцены цепочки речи Westworld.

Код на JSFiddle (CSS ниже): http://jsfiddle.net/S2nqK/345/

Картинка пользовательского интерфейса Westworld: https://qph.ec.quoracdn.net/main-qimg-44c9f03b2abfe9f3833763eece1b0cc4?convert_to_webp=true

body {background-color: #353535;
font-family: 'Open Sans';}
.div-outer {

 /* Chrome / Safari */
    background:
        -webkit-linear-gradient(45deg,  transparent 0px, #6ea1a1 0px), /* bottom left */
        -webkit-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
        -webkit-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
        -webkit-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */

    /* Firefox */
        background:
        -moz-linear-gradient(45deg,  transparent 0px, #6ea1a1 0px), /* bottom left */
        -moz-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
        -moz-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
        -moz-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */

     /* Opera */
        background:
        -o-linear-gradient(45deg,  transparent 0px, #6ea1a1 0px), /* bottom left */
        -o-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
        -o-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
        -o-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */


   padding: 2px;
   color: #fff;

}

.div-inner {


    background:
        -webkit-linear-gradient(45deg,  transparent 0px, #000 0px),
        -webkit-linear-gradient(135deg, transparent 14px, #000 14px),
        -webkit-linear-gradient(225deg, transparent 0px, #000 0px),
        -webkit-linear-gradient(315deg, transparent 5px, #000 5px);

         background:
        -moz-linear-gradient(45deg,  transparent 0px, #000 0px),
        -moz-linear-gradient(135deg, transparent 14px, #000 14px),
        -moz-linear-gradient(225deg, transparent 0px, #000 0px),
        -moz-linear-gradient(315deg, transparent 5px, #000 5px);

         background:
        -o-linear-gradient(45deg,  transparent 0px, #000 0px),
        -o-linear-gradient(135deg, transparent 14px, #000 14px),
       -o-linear-gradient(225deg, transparent 0px, #000 0px),
        -o-linear-gradient(315deg, transparent 5px, #000 5px);


   padding: 10px;

   height: 92px;
   text-align: center;
}


.div-outer, .div-inner {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.contain {
   width: 180px;
}
.title {background-color: #76ffff; 
  padding: 6px;
  color: #000;
  border-radius: 2px;
  font-weight: bold;
 text-align-last: justify;
 text-align: justify;
  }
.font-large {font-size: 34pt;}
.font-tiny {font-size: 10pt;}
.cyan {color: #76ffff;}
/* Ignore the CSS from this point, it's just to make the demo more presentable */

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #fff;
  display: inline-block;
  vertical-align: middle;
}


p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}
0
Casual Bob

Итак, я создал библиотеку JS для автоматизации создания границ с фаской . У нее есть два метода создания фасок:

Метод 1: он создает фон chamfered с помощью Canvas API и устанавливает его в качестве CSS background-image элемента.

Метод 2: он добавляет 4 треугольных DOM-элемента на основе CSS вокруг цели, создавая фаску.

Вы будете придерживаться метода 1, когда сможете позволить библиотеке установить background-image, и вам понадобится метод 2, когда у вашей цели уже есть фон, как в <img>.

Использование простое, просто вызовите ChamferBg для использования метода 1 или ChamferEnvelop для использования метода 2:

var el = document.getElementById('box');
ChamferBg(el, {
    size: 20,
    sw: 6,
    sc: '#447aec',
    fc: '#21ceff',
    tl: false,
    br: false,
    resize_observe: true
});

Варианты и их значения по умолчанию:

{
    size: 5,    // chamfer size
    sw: 1,      // stroke width
    sc: 'black',    // stroke color,
    fc: undefined,  // fill color
    fp: undefined,  // URL of an image to use as fill pattern

    tl: true,   // chamfer top-left corner?
    tr: true,   // chamfer top-right corner?
    bl: true,   // chamfer bottom-left corner?
    br: true,   // chamfer bottom-right corner?

    resize_observe: false
    // turn on resize_observe observer?
    // this will observer whenever the element
    // resizes and will refresh the background
}

Вам нужно будет установить для resize_observe значение true, если вы используете method 1, и ваш элемент может изменить свой размер во время выполнения, потому что тогда он будет нуждаться в воссоздании скошенного фона при каждом изменении его размера.

0
Ramon