Нежелательный угол, создаваемый шириной границы [dубликат]

Question 1

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

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

Question 2

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

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

Question 3

Question 4

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

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

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

Question 5

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

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

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

Question 6

Для верхней границы и нижней границы вы можете использовать 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>

Question 7

Question 8

Вы не можете.

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

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

Question 9

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

Демонстрация:

Выход:

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>

Axel · Answer 1 · 15 August 2018 в 16:40

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

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

0

ответ дан Axel 15 August 2018 в 16:40

1

Не добавляйте встроенный CSS, это плохая практика. – Johnny Dew 19 September 2017 в 03:27

csguimaraes · Answer 2 · 15 August 2018 в 16:40

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

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

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

Gustav · Answer 3 · 15 August 2018 в 16:40

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

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

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

12

ответ дан Gustav 15 August 2018 в 16:40

1

хорошо подмечено. Поддержка IE8 тоже, в отличие от box-shadow (да, я работаю над проектом, требующим поддержки IE8 O.o) – Larry 10 November 2015 в 16:12
2

Это блестяще. Должно быть принято ответ честно. – Jonathan Wood 21 February 2017 в 19:17
3

Я сделал что-то похожее для border-bottom на кнопке. У меня была такая же проблема, просто добавив border-width: 0;, мне нужны были красивые квадратные ребра внизу, а не стандартные митированные, потому что это было больше подчеркиванием для кнопки и остальная часть границ была прозрачной. – Anovative 18 May 2018 в 18:50

Madalina Taina · Answer 4 · 15 August 2018 в 16:40

Для верхней границы и нижней границы вы можете использовать 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>

3

ответ дан Madalina Taina 15 August 2018 в 16:40

1

не знаю, почему у вас есть нисходящий поток, так как это один из двух ответов, который фактически показывает способ достижения этого. отлично сработано! – oligofren 8 June 2016 в 14:26
2

Спасибо @oligofren. Я не знаю, почему мой ответ был проигнорирован ... Приятно, что вы заметили, что это способ решить проблему. – Madalina Taina 8 June 2016 в 18:15
3

Это хорошее решение, но кто-то еще уже предложил использовать тень с тенью два года назад. – Lindsey 16 August 2016 в 00:59
4

@Lindsey Спасибо за отзыв. Я не понимаю, почему вы говорите, что это не сработает, если вы измените фон при наведении - вы тоже можете изменить тень коробки или позволить те же самые приличия. – Madalina Taina 6 October 2016 в 10:59

Rich Bradshaw · Answer 5 · 15 August 2018 в 16:40

Вы не можете.

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

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

ThinkingStiff · Answer 6 · 15 August 2018 в 16:40

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

Демонстрация:

Выход:

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>

52

ответ дан ThinkingStiff 15 August 2018 в 16:40

1

+1 для кнопки JSFiddle (и для того, чтобы быть одним из двух ответов, которые не являются «вы не можете») – Sandy Gifford 8 May 2013 в 23:41
2

Идеальное решение для моего дела! – Sergey 12 November 2016 в 12:35

Нежелательный угол, создаваемый шириной границы [dубликат]

6 ответов

Выход:

CSS:

HTML:

Другие вопросы по тегам:

Похожие вопросы: