CSS3 изменить стиль div

Question

Я искал более часа прямо сейчас после этого. Я пытаюсь найти способ стилизации div.

http://i.gyazo.com/b3e39c4d80c74e559e832c4d22bb87c2.png

На рисунке показан черный DIV с «стрелка» стороне слева. Как вы это делаете?

Answer 1

вот быстрый способ выполнить это.

jsfiddle demo

CSS

#frame{ 
    width:90%; 
    border: 20px solid lightblue; 
    background:black; 
} 
.title{ 
    font-size:3em; 
    position:absolute; 
    color:white; 
    top: 60px; 
    margin-left:80px; 
} 
.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 

    border-left: 60px solid lightblue; 
} 

HTML

<div id="frame"> 
<div class="arrow-right"></div> 
<div class="title">Some text here!</div> 
</div> 

Answer 2

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

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200); 
 
body { 
 
    background: #BCDEB1; 
 
} 
 
h1 { 
 
    font-family: 'Yanone Kaffeesatz'; 
 
    float:right; 
 
    background: black; 
 
    position: relative; 
 
    color: white; 
 
    padding: 0.5em 0.5em; 
 
    line-height: 1em; 
 

 
    margin-right: 0.1em; 
 
    box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
h1:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 100%; 
 
    top: 0; 
 
    border: 0 solid black; 
 
    border-left: 0.5em solid transparent; 
 
    border-top-width: 1em; 
 
    border-bottom-width: 1em; /* 1 + 1 = 2. The parent is 1em line height + 0.5em top padding + 0.5em bottom padding */ 
 
    
 
    box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2); 
 
}

<h1>Administration and etc?</h1>

Answer 3

Так как треугольник под углом, это может быть стоит посмотреть в SVG как content псевдо элемента :before.

Вот код, который я почти выполнил для вас, используя только CSS. http://codepen.io/anon/pen/dPVERJ

Возможно, вам придется немного настроить его, чтобы он выглядел точно так же, как изображение. Я использовал cssarrowplease, чтобы сгенерировать основную стрелку и настроить ее там.

Также см http://css-tricks.com/snippets/css/css-triangle/

Я бы Google что-то вроде этого, прежде чем спрашивать здесь, это проблема, которая была выяснял много раз.