Используя это:

background: -moz-linear-gradient(315deg, transparent 10px, black 10px);

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

1
0x0700 8 Мар 2015 в 00:53

2 ответа

Лучший ответ

Это не идеальное решение, но мы можем поиграть с остановками цвета и использовать псевдоэлементы ::before / ::after для имитации границ следующим образом:

(Префиксы поставщиков опущены из-за краткости.)

div {
  width: 150px;
  height: 50px;
  background: linear-gradient(315deg, transparent 10px, red 10px, red 12px, black 12px);
  border-top: 2px solid red;
  border-left: 2px solid red;
  position: relative;
}

div::after, div::before {
  content: "";
  position: absolute;
  background: red;
}

div::before {
  width: 2px;
  top: 0; right: 0; bottom: 14px;
}

div::after {
  height: 2px;
  left: 0; right: 14px; bottom: 0;
}
<div></div>
0
Hashem Qolami 7 Мар 2015 в 22:07

Вы можете использовать box-shadow, inset и / outset и столько, сколько хотите

div {
  background:linear-gradient(45deg,yellow,purple,gray,lime,turquoise);
  box-shadow:0 0 0 5px turquoise;
  padding:2em 3em;
  display:inline-block;
  margin:0.5em;
  }
div:nth-child(even) {
  box-shadow:0 0 0 3px gray, 0 0 0 6px tomato,inset 0 0 0 2px ,inset 0 0 0 5px white;}
div:last-of-type {
  box-shadow: 0 0;}
<div></div><div></div><div></div><div></div><div></div>

Или продолжайте использовать градиент:

div {
  background:
    linear-gradient(to left, black, black)  no-repeat,    
    linear-gradient(to top, black, black)  no-repeat,    
    linear-gradient(to right, black, black) no-repeat,    
    linear-gradient(to bottom, black, black)  no-repeat,
    linear-gradient(to bottom left, gray,transparent,yellow) purple
    ;
   background-position: left bottom  ,right top , left top,left top ; 
  background-size: 100% 2px, 2px 100%,100% 2px, 2px 100%, 100%;
  padding:2em 3em;
  float:left;
  margin:0.5em;
  }
<div></div><div></div><div></div><div></div>
0
G-Cyrillus 7 Мар 2015 в 22:08