Создание границы треугольника CSS

0

Я хочу сделать div следующим образом:

прилагается http://oi62.tinypic.com/334t93o.jpg

можно ли сделать это с помощью css? если да, то как?

  • 4
    Вопросы о коде должны демонстрировать минимальное понимание решаемой проблемы . Включите попытки решения, почему они не сработали, и ожидаемые результаты. См. Также: Контрольный список вопросов переполнения стека .
  • 0
    Иногда, по моему мнению, пользователь может на законных основаниях не иметь представления о том, как что-то сделать.
Теги:

4 ответа

4
Лучший ответ

Я бы использовал :after элемент psuedo был абсолютно позиционирован и использовал необоснованный CSS-треугольник.

.date {
  background-color: #006;
  color: #fff;
  width: 200px;
  position: relative;
  text-align: center;
  padding: 20px 0;
}

.date:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #006 transparent transparent transparent
}

Демо: http://jsbin.com/yonisaqi/2/edit?html,css,output

Поделиться
  • 0
    отличная работа ， Билл
3

Да.

Используйте a ::after psuedo-element, поместите его с absolute и переместите его в нужное положение. Затем используйте типичные приграничные трюки, чтобы сделать треугольник - в этом случае вам понадобятся левая и верхняя границы.

Пойдите и попробуйте, тогда, если у вас все еще возникают проблемы, возвращайтесь с некоторым кодом;)

Поделиться
  • 0
    Не могли бы вы сказать мне, что это за типичные граничные трюки?
2

Это может сделать трюк :)

http://jsfiddle.net/dxNVa/

<div class="hide">
    <div class="arrow-down"></div>
</div>

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    margin-left:-20px;
    border-top: 20px solid #f00;
}

.hide{
    overflow:hidden;
}
Поделиться
1

Я просто хочу, чтобы добавить этот ответ для справки, вы даже не нужен какой - либо псевдо-элемент, как :after того, однако это будет сделать трудно центрировать текст, и вы можете использовать некоторые изображения или градиент для фона (который может" t пойти с этим решением):

div {
 color:white;
 font-size:30px;    
 width:200px;
 height:100px;
 line-height:100px;    
 background:blue;
 background-clip:content-box;
 border-left:20px solid blue;       
 border-bottom:20px solid transparent;
 text-align:center;
}

скрипка

Поделиться
  • 1
    +1 Это интересный, но следует отметить, что это не работает на IE8.
  • 0
    @dystroy спасибо, извините, но что за функция, которая не работает на IE8? Я думаю, что другие решения имеют какую-то более высокую особенность (например, :after ).
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню