我想在css中重新创建这个引用

Question

您好我是css的初学者，我想重新创建：

这是我目前的开始，我不知道如何把这个＆＃39; ＆＃34; ＆＃39;

＆＃13;

＆＃13;

$data = array(
    'username' => $username,
    'password' => $password,
    'email' => $email,
    'ip_address' => $ip_address,
    'created_on' => date("H:i:s"),
    'date_created' => date("Y-m-d"),
    'active' => '1',
    'user_type_id' => '2'
);

＆＃13;

＆＃13;

＆＃13;

`

Answer 1

尝试使用:before，这样的事情会给你一个近似的结果

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

Answer 2

您可以使用伪元素制作它。下面是一个示例，您可以调整font-size / font-family和其他值以获得所需内容。您也可以更改内容和/或使用图像或图标。

＆＃13;

＆＃13;

#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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

有很多方法可以做到这一点，其中一种方法是你可以使用图标。 就像我个人使用 fontawesome 。

您可以获得许多不同大小的图标，只需将它们与在线css文件一起使用即可。

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

这是您要插入的引号的链接

我为你创建了一个原型。

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

＆＃13;

＆＃13;

#rectangle{
    width: 100%;
	height: 230px;
	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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

作为初学者，包含其他库或伪元素可能会很棘手。这是一个相当简单的开始。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;