Как исправить угол наклона границы HTML с CSS?

Question

Как исправить угол наклона границы HTML с CSS?

0

Вы можете получить доступ к следующему коду по этой ссылке: jsfiddle.net/2NPxV

Мой код css:

.custom_content { 
display: block; 
width:200px;
height: 30px; 
margin: 5px 0; 
padding: 0 0;   
border: 1px solid #000000;  }  

.left-border-red
{
border-left: 5px solid red;
}

Мой html-код:

<div class="container">
<div class="row custom_content left-border-red">
My content  
</div>  
</div>

Результат: Пожалуйста, увеличьте изображение, чтобы увидеть верхние левые и нижние области склона на прямоугольнике. http://rasih.net/se/main.png

Задача 1: Верхний левый угол имеет наклон. Я хочу это исправить.

Задача 2: Нижний левый угол имеет наклон. Я хочу это исправить.

Резюме: Как я могу исправить верхний левый и нижний левый уклон для моего вывода? Я хочу сохранить внешнюю черную границу и внутреннюю красную границу одновременно. Но я не хочу никакого склона для любого угла.

Ras 18 фев. 2014, в 00:51

Источник

0

добавьте эту скрипку в свой пост: jsfiddle.net/2NPxV
EfrainReyes 17 фев. 2014, в 23:42

Теги:

html

css

css3

2 ответа

1

Здесь, ознакомьтесь с этой скриптой: http://jsfiddle.net/DX7w8/1/

Единственное изменение, которое я сделал, это вместо использования свойства border-left, которое вызывает настройку только определенного сегмента квадрата, я использовал свойство box-shadow и манипулировал позицией, так что она, казалось, имела красную левую границу, который заполняет левую сторону.

Я также увеличил padding-left до 6px, чтобы текст не пересекался с границей.

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

Надеюсь это поможет.

dpdubbs 17 фев. 2014, в 22:12

0

Ваше объяснение удивительно. Большое спасибо. Оба твоих ответа работают для меня достаточно. Я указал это предложение в своем вопросе - я хочу сохранить внешнюю черную и внутреннюю красную границу одновременно. Таким образом, ответ Валентина применим и к этому. Но я не мог не сказать себе спасибо.
Ras 18 фев. 2014, в 00:55

Ещё вопросы

добавьте эту скрипку в свой пост: jsfiddle.net/2NPxV
Ваше объяснение удивительно. Большое спасибо. Оба твоих ответа работают для меня достаточно. Я указал это предложение в своем вопросе - я хочу сохранить внешнюю черную и внутреннюю красную границу одновременно. Таким образом, ответ Валентина применим и к этому. Но я не мог не сказать себе спасибо.

Valentin · Accepted Answer · 2014-02-17T22-20-00.000Z

вместо border-left вы можете использовать :before или :after псевдо-элементы и стиль, чтобы посмотреть, как вы хотите

.left-border-red:before {
  content:'';
  border-left: 5px solid red;
  height: 100%;
  width: 0;
  display: block;
  float:left;
}

http://jsfiddle.net/valentin/2NPxV/1/