Установить границу css до конца в 90 вместо 45 градусов

У меня есть div с разными цветами для свойств border-bottom и border-right. Таким образом, они разделяются по линии, оставляющей коробку под углом 45 градусов.

Как я могу сделать нижнюю границу короче, чтобы правая граница доходила до нижней части элемента, что дало бы разделительную линию на 90 градусов?

Ответы

Ответ 1

Печальный факт: Пограничные углы закруглены. Всегда. (Это видно только при использовании разных цветов.)

Чтобы имитировать стыковое соединение, вы можете складывать два div для получения имитируемого результата:

<style>
div {
  position:absolute;
  left:0;
  top:0;
  height:100px;
  width: 100px;
}
</style>

<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">

</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">

</div>

Постарайтесь больше или контролируйте верх и низ по-разному, чтобы лучше контролировать внешний вид сустава.

Ответ 2

Вы можете сделать это с помощью box-shadow.

Демо: jsFiddleсуб >

Вывод:

box-shadow example

CSS

#borders {
    border-bottom: 20px solid black;  
    box-shadow: 20px 0 0 0 red;
    height: 150px;
    margin: 30px;
    width: 150px;
}

HTML:

<div id="borders"></div>

Ответ 3

Я решил эту проблему, используя border-width. Вы просто уменьшаете ширину границы по краям, которые вы не хотите видеть.

Если мы не хотим границы на верхнем краю, мы можем положить border-width в 0.

border-width: 0px 5px 5px 5px;
border-color:#ddd #000 #000 #000;

Ответ 4

Для верхней границы и нижней границы вы можете использовать box-shadow:

.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}
<div class="box"></div>

Ответ 5

Вы не можете.

Для углов 90 ° вы можете просто использовать цветные div.

Вы можете получить аналогичный эффект для произвольных углов, используя перекос и абсолютное позиционирование, но будет сложно (если не невозможно) заставить его выглядеть одинаково в старых браузерах (особенно для IE8 и ниже).

Ответ 6

Я не уверен, что это возможно. Но вы можете иметь закругленный угол:

/*For Chrome-Safari*/
-webkit-border-radius:0px 0px 16px 0px;
/*For Firefox*/
-moz-border-radius:0px 0px 16px 0px;

Пусть это даст вам аналогичный эффект.

Ответ 7

вы также можете сделать это:

<div style="border-bottom: 20px solid black;  
            border-right: 20px solid transparent; 
            height: 150px;
            margin: 30px;
            width: 150px;">
</div>