Как реализовать border у прямоугольника с отрезанным углом?

#css #css3 #вёрстка

Как реализовать неровный border?
Фон неровный поэтому треугольник через псевдоэлемент не сделать.
clip-path использовать не могу,надо поддерживать ie11



.a2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(-45deg, transparent 15px, #58a 0) right;
  background-repeat: no-repeat;
  border: 3px solid #000;
  border-radius: 10px;
}





    

Ответы

Ответ 1

Через псевдоэлемент не сделать, а через два псевдоэлемента можно)) :



div {
  display: inline-block;
}

.a1 {
  position: relative;
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  border-top: 3px solid #000;
  border-left: 3px solid #000;
  border-right: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  background: linear-gradient(135deg, #58a 0%, #58a 89%, #000 89%, #000 90%, rgba(0,
0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  background-repeat: no-repeat;
  border-radius: 43px;
}

.a1:before {
  content: '';
  position: absolute;
  height: 43px;
  width: 154px;
  bottom: -3px;
  left: -3px;
  background: rgba(0, 0, 0, 0);
  border-radius: 0 0 7px 43px;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-left: 3px solid #000;
  border-right: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid #000;
}

.a1:after {
    content: '';
    position: absolute;
    height: 157px;
    width: 43px;
    top: -3px;
    right: -3px;
    background: rgba(0, 0, 0, 0);
    border-radius: 0 43px 12px 0;
    border-top: 3px solid #000;
    border-left: 3px solid rgba(0, 0, 0, 0);
    border-right: 3px solid #000;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
}

.a2 {
  position: relative;
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  border-top: 3px solid #000;
  border-left: 3px solid #000;
  border-right: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  background: linear-gradient(135deg, #58a 0%, #58a 89%, #000 89%, #000 90%, rgba(0,
0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  background-repeat: no-repeat;
}

.a2:before {
  content: '';
  position: absolute;
  height: 3px;
  width: 158px;
  bottom: -3px;
  left: -3px;
  background: #000;
  border-radius: 0 0 3px 0;
}

.a2:after {
  content: '';
  position: absolute;
  height: 158px;
  width: 3px;
  top: -3px;
  right: -3px;
  background: #000;
  border-radius: 0 0 3px 0;
}

.a3 {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  border: 3px solid #000;
  background: #58a;
  border-radius: 0 0 43px 0;
}