2

Всем привет! Есть у меня в блоке нижний бордер. Я хочу сделать так, чтобы первые 100px были цвета исходного, а остальная часть границы - оранжевого цвета. Можно это сделать средствами css3 не добавляя лишних блоков с наслоениями цветов?

.stripe {
  border-bottom:2px solid #c37488;
  max-width:300px;
}
<div class="stripe">
  полоска
</div>

3 ответа 3

6

можно так

.stripe {
  border-bottom: 2px solid #c37488;
  max-width: 300px;
  position: relative;
}
.stripe:before {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  border-bottom: 2px solid orange;
  width: calc(100% - 100px);
}
<div class="stripe">
  полоска
</div>

или так

.stripe {    
    max-width: 300px;
    position: relative;
}
.stripe:before,
.stripe:after{
    content: '';
    position: absolute; top: 100%; 
    width: 100px;
    height: 2px;
}
.stripe:before{   
    left: 0;
    background: #c37488;    
}
.stripe:after{
    right: 0;    
    background: orange;
    width: calc(100% - 100px);
}
<div class="stripe">
  полоска
</div>

и тот же вариант, но без использования calc:

.stripe {    
    max-width: 300px;
    position: relative;
}
.stripe:before,
.stripe:after{
    content: '';
    position: absolute;
    top: 100%; 
    height: 2px;
}
.stripe:before{   
    left: 0;
    width: 100px;
    max-width: 100%; /* А вдруг весь div был меньше */
    background: #c37488;    
}
.stripe:after{
    left: 100px;
    right: 0;
    background: orange;
}
<div class="stripe">
  полоска
</div>

вариант с градиентом

.stripe {
    max-width: 300px;
    position: relative;
}
.stripe:before {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #c37488;
    /* Old browsers */
    background: -moz-linear-gradient(left, #c37488 0%, #c37488 100px, #ffa500 100px, #ffa500 100px, #ffa500 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #c37488), color-stop(100px, #c37488), color-stop(100px, #ffa500), color-stop(100px, #ffa500), color-stop(100%, #ffa500));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #c37488 0%, #c37488 100px, #ffa500 100px, #ffa500 100px, #ffa500 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #c37488 0%, #c37488 100px, #ffa500 100px, #ffa500 100px, #ffa500 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #c37488 0%, #c37488 100px, #ffa500 100px, #ffa500 100px, #ffa500 100%);
    /* IE10+ */
    background: linear-gradient(to right, #c37488 0%, #c37488 100px, #ffa500 100px, #ffa500 100px, #ffa500 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c37488', endColorstr='#ffa500', GradientType=1);
    /* IE6-9 */
}
<div class="stripe">полоска</div>

7
  • border:1px вместо border-bottom:2px приводит к более жирной линии при уменьшении масштаба. <s>Советую поменять.</s> Опоздал, ты уже сам поменял :)
    – Qwertiy
    21 авг 2015 в 9:34
  • @soledar10 супер! спасибо
    – Вася
    21 авг 2015 в 9:49
  • @Вася, а говорил, без наслоения цветов... UPDATE: Не заметил второй вариант.
    – Qwertiy
    21 авг 2015 в 10:02
  • А зачем задавать ширину через calc, если можно вместо этого одновременно указать left и right?
    – Qwertiy
    21 авг 2015 в 10:04
  • @Qwertiy вы меня превратно поняли - я писал "не добавляя лишних блоков с наслоениями цветов", а :before и :footer - это псевдоэлементы, а не блоки) а как это - с помощью left и right?
    – Вася
    21 авг 2015 в 10:12
1

Примерно так. Ещё надо проверить, какие префиксы и в каких местах (border-image/linear-gradient) нужны для кроссбраузерности. Ещё убедиться в поддержке currentColor, возможно, стоит заменить его на нужный цвет.

.stripe {
  border-bottom: 2px solid transparent;
  max-width: 300px;
  color: green;
  border-image: linear-gradient(to right, currentColor 0%, currentColor 100px, orange 100px, orange 100%) 0 0 2;
}
<div class="stripe">
  полоска
</div>

0

Вариант на 4 цвета. Таким образом можно сделать сколько угодно.

.stripe {

border-bottom: 5px solid transparent;
    border-image: linear-gradient(to right, #be6767 0%, #be6767 25%, #38c695 25%, #38c695 50%, #b27cf5 50%, #b27cf5 75%, #feb960 75%, #feb960 100%) 1 1;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.