làm thế nào để tôi tạo ra một nền tam giác với css tinh khiết

Question

Tôi đã theo khối html

<div class=""header> 
    <i class="icon-star"></i> 
    <h1>some text goes here</h1> 
</div> 

và những phong cách css

h1 { 
    display: inline-block; 
} 
i { 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 200px 0 0 200px; 
    border-color: transparent transparent transparent red; 

} 

và tôi cũng đang sử dụng phông chữ biểu tượng fontawesome. Những gì tôi đang cố gắng đạt được là

Đây là những gì tôi đã thử jsfiddle. tôi hoàn toàn thất bại trong việc làm điều này. Có thể ai đó hãy giúp tôi?

Answer 1

Tôi tìm thấy câu trả lời bản thân mình ..

HTML

<div class=""header> 
    <i></i> 
    <h1>some text goes here</h1> 
</div> 

css

.header { 
    position: relative; 
} 

h1 { 
    margin: -130px 0 0 200px; 
} 
i { 
    color: red; 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 200px 0 0 200px; 
    border-color: transparent transparent transparent black; 
} 
i:before { 
    font-family: 'FontAwesome'; 
    content: "\F005"; 
    font-size: 64px; 
    position: absolute; 
    top: 100px; 
    left: 40px; 
} 

jsfiddle

Answer 2

bạn đã sử dụng h1 trong html và h2 trong css của bạn!

này có thể giúp

h1 { 
    margin: -130px 0 0 200px; 
} 
i { 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 200px 0 0 200px; 
    border-color: transparent transparent transparent red; 
} 

fiddle

Answer 3

JFiddle này có thể giúp bạn gần gũi hơn một chút. Xin lưu ý rằng điều này đòi hỏi tam giác của bạn để có chiều cao cố định, vì vậy tôi có thể sử dụng một line-height:

#text { 
float: right; 
line-height: 200px; 
vertical-align: middle; 
margin-right: 150px; 
font-weight: bold; 
font-size: 20px; 

Bạn có muốn tạo ra các ngôi sao trong tam giác sử dụng CSS là tốt?

Answer 4

như thế này

cho line-height hoặc position:absolute;

DEMO

CSS

h1 { 
    display: inline-block; 
    position:absolute; 
    line-height:150px; 

} 

Answer 5

Các bạn nghĩ sao về giải pháp này? http://jsfiddle.net/XrAaP/

Đây là HTML. (HTML đúng. Không giống như sử dụng thẻ in nghiêng cho những thứ khác ...)

<header> 
    <div class="triangle"></div> 
    <div class="foreground"> 
     <h1>Some text goes here</h1> 
     <p>*</p> 
    </div> 
</header> 

Và đây là CSS.

.triangle{ 
    border-style: solid; 
    border-width: 200px 0 0 200px; 
    border-color: transparent transparent transparent black; 
    display: inline-block; 
    vertical-align: top; 
} 

.foreground{ 
    display: inline-block; 
    vertical-align: top; 
} 

h1{ 
    margin-left: -128px; 
} 

p{ 
    color: #fff; 
    font-size: 8em; 
    margin: 0 0 0 -178px; 
}