Можно ли создать угловой угол в CSS?

Ответ 1

Немного сложно сохранить границу, но мне удалось добиться близкого эффекта, используя: before и: after элементы с родительским контейнером (: before и: after не работают над тегом img)

• Добавить границу в контейнер

• Добавьте ранее, чтобы заблокировать угол и смещение на -1, чтобы закрыть границу

• Добавьте после этого немного смещенное от ранее, чтобы создать линию внутри среза

Как вы можете видеть, толщина линии 45deg немного сложна:

.cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}

<div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

Ответ 2

СМОТРИТЕ ДЕМО

Вы можете сделать это, используя псевдо, вместе с border-width и border-color, чтобы увидеть, как это сделать. см. ниже код.

HTML

<div class="cut"></div>

CSS

.cut {
    position:relative;
    width:500px;
    height: 200px;
    padding:20px;
    color:#000;
    background:#ccc;
}

.cut:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    border-width:30px 30px 0px 0px;
    border-style:solid;
    border-color:#fff transparent transparent #fff ;
}

Другое решение, использующее этот jQuery script для поддержки кросс-браузера. → http://jquery.malsup.com/corner/

СМОТРЕТЬ ДЕМО ЗДЕСЬ

HTML

<div class="cut"></div>

CSS

.cut {
    position:relative;
    width:500px;
    height: 200px;
    padding:20px;
    color:#000;
    background:#ccc;
}

JS

$(".cut").corner("bevel tl 50px");

Ответ 3

Использование CSS:

Точную форму можно получить с помощью CSS. Идея состоит в том, чтобы иметь элемент с border-radius для верхнего левого угла, перекосить его вдоль оси Y, а затем поместить его непосредственно перед прямоугольником. Сделав это, вы увидите, что прямоугольный элемент имеет треугольный разрез сверху с одним изогнутым краем.

Если внутренняя часть формы имеет только цвет (сплошной или прозрачный), то ее можно достичь, используя только один элемент. Однако, если изображение должно быть добавлено внутри формы (например, упомянутое в вопросе), нам нужно больше, чем один элемент, потому что нам нужно изменить эффект skew на изображение, и это невозможно сделать без дочернего элемента.

.shape,
.shape-image {
  position: relative;
  height: 150px;
  width: 400px;
  border-bottom: 2px solid crimson;
  overflow: hidden;
}
.shape:before,
.shape:after,
.shape-image:after {
  position: absolute;
  content: '';
  top: 0px;
  height: 100%;
  z-index: -1;
}
.shape:before,
.shape-image .before {
  left: 0px;
  top: -2px;
  width: 50px;
  border: 2px solid crimson;
  border-width: 3px 0px 0px 2px;
  border-top-left-radius: 8px;
  transform-origin: right bottom;
  transform: skewY(-45deg);
}
.shape:after,
.shape-image:after {
  left: 52px;
  width: calc(100% - 54px);
  border: 2px solid crimson;
  border-left: none;
}
.shape:after,
.shape:before {
  background: aliceblue;
}
.shape.semi-transparent:after,
.shape.semi-transparent:before {
  background: rgba(150, 150, 150, 0.5);
}
.shape-image .before {
  position: absolute;
  top: 0px;
  height: 100%;
  overflow: hidden;
}
.shape-image .before .img {
  height: 100%;
  width: 100%;
  border-top-left-radius: 8px;
  background: url(http://lorempixel.com/400/150);
  transform-origin: right bottom;
  transform: skewY(45deg);
}
.shape-image:after {
  background: url(http://lorempixel.com/400/150);
  background-position: -50px 0px;
}

/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.shape{
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>
<div class="shape semi-transparent"></div>
<div class="shape-image">
  <div class="before">
    <div class="img"></div>
  </div>
</div>

Ответ 4

Это можно сделать, но это решение для CSS3, поэтому я не буду работать над старыми браузерами.

То, что я сделал, я создал два div, у каждого есть граница, а у другой - граница только внизу. Используя translate, я затем повернул этот div 45 градусов, чтобы замаскировать угол другого div, давая желаемый эффект.

HTML

<div class="holder">
    <div class="main"></div>
    <div class="corner"></div>
</div>

CSS

.holder { 
    position:relative;
    width: 180px;
    margin:30px
}

.main {
    width: 160px;
    height: 40px;
    border: 1px solid grey;
    position:absolute; 
    left:0;
    z-index: 1;
}
.corner { 
    border-bottom: 1px solid grey;
    width:30px; 
    height: 41px; 
    position:absolute;
    top:-25px;
    right:0;
    z-index:2;
    background:#fff;

    /* Safari */
    -webkit-transform: rotate(45deg);    
    /* Firefox */
    -moz-transform: rotate(45deg);    
    /* IE */
    -ms-transform: rotate(45deg);    
    /* Opera */
    -o-transform: rotate(45deg);
}

Выход

См. Fiddle