私はCSSの初心者です、私はこの再作成したいこんにちはCSS

Question

でこの見積もりを再作成したい：これは私の現在の開始である

を、私は "を配置する方法を知っている` tを「「

#rectangle{ 
 
    width: 100%; 
 
\t height: 230px; 
 
\t background-color:darkcyan; 
 
    display: block; 
 
    margin: 0px; 
 
    
 
} 
 
#rectangle p{ 
 
    padding-top: 85px; 
 
    padding-left: 60px; 
 
    padding-right: ; 
 
    font-family: roboto_bold; 
 
    text-transform: uppercase; 
 
    margin: 0 auto; 
 
    display: block; 
 
    font-size: 38px; 
 
    color: aliceblue 
 
}

`

Answer 1

はこのようなものはあなたに近似結果

#rectangle p:before { 
    content: '"'; 
    position: absolute; 
    color: yellow; 
    font-size: 2em; 
    transform: translateY(-100%); 
} 

Answer 2

を与える必要がありますが、疑似要素でそれを作ることができ、:beforeを使用してみてください。ここでは例を示します。次に、font-size/font-familyやその他の値を調整して、必要なものを得ることができます。また、コンテンツを変更したり、画像やアイコンを使用したりすることもできます。

#rectangle { 
 
    width: 100%; 
 
    height: 230px; 
 
    background-color: darkcyan; 
 
    display: block; 
 
    margin: 0px; 
 
} 
 

 
div#rectangle:before { 
 
    content: '\201c'; 
 
    font-size: 100px; 
 
    font-family: fantasy; 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 60px; 
 
    color: yellow; 
 
} 
 

 
#rectangle p { 
 
    padding-top: 85px; 
 
    padding-left: 60px; 
 
    font-family: roboto_bold; 
 
    text-transform: uppercase; 
 
    margin: 0 auto; 
 
    display: block; 
 
    font-size: 38px; 
 
    color: aliceblue 
 
}

<div id="rectangle"> 
 
    <p>Loreim ispum Loreim ispumLoreim ispum Loreim ispum Loreim ispum</p> 
 
</div>

Answer 3

あなたはアイコンを使用できることであるそのうちの一つにこれを行うための多くの方法、が存在する場合があります。 私個人的にはfontawesomeのように使用してください。

サイズの異なる多くのアイコンを取得することができます。オンラインのCSSファイルで使用できます。

http://fontawesome.io/icon/quote-left/

これは、あなたが

私はあなたのためのプロトタイプを作成したを挿入したい引用符へのリンクです。初心者として

https://codepen.io/djmayank/pen/opYeyo

#rectangle{ 
 
    width: 100%; 
 
\t height: 230px; 
 
\t background-color:darkcyan; 
 
    display: block; 
 
    margin: 0px; 
 
    
 
} 
 
#rectangle p{ 
 
    padding-top: 5px; 
 
    padding-left: 60px; 
 
    padding-right: ; 
 
    font-family: roboto_bold; 
 
    text-transform: uppercase; 
 
    margin: 0 auto; 
 
    display: block; 
 
    font-size: 38px; 
 
    color: aliceblue 
 
} 
 
.fa { 
 
    
 
    color:#abe941; 
 
    margin-top:3%; 
 
    margin-left:10%; 
 
}

<div id="rectangle"> 
 
    <i class="fa fa-quote-left fa-2x" aria-hidden="true"></i> 
 
    <p>Loreim ispum Loreim ispumLoreim ispum Loreim </p> 
 
</div> 
 
<script src="https://use.fontawesome.com/8d594f9226.js"></script>

Answer 4

他のライブラリまたは擬似要素を含めることは、難しいかもしれません。ここでは簡単なスタートです。

.blue-box { 
 
    background: #2edfd2; 
 
    padding: 10px 40px; 
 
    width: 300px; 
 
} 
 

 
.lquote { 
 
    color: #ace941; 
 
    font-size: 60px; 
 
    height: 20px; 
 
} 
 

 
.underline { 
 
    background-color: #ace941; 
 
    height: 4px; 
 
    width: 20px; 
 
} 
 

 
.fine-print { 
 
    margin: 4px 0 0; 
 
    font-size: .6em; 
 
}

<div class="blue-box"> 
 
    <div class="lquote">&ldquo;</div> 
 
    <p>Knowing I was adopted may have made me feel more independent, but I have never felt abandoned. My parents made me feel special. 
 
    <div class="underline"></div> 
 
    <p class="fine-print">Steve Jobs, 2009</p> 
 
</div>