圖片，內容和div中的箭頭

-2

請幫我把這個div看起來就像下面的圖片一樣。我嘗試做這項工作，但似乎我錯過了一些東西，請幫助我使我的代碼更加準確。我試圖研究，但我找不到解決方案。希望有人能幫助我。圖片，內容和div中的箭頭

div { 
 
    width: 100%; 
 
    background-color: #ccc; 
 
    border: 1px solid black; 
 
    border-left-width: 4px; 
 
    font: bold 22px/100px Arial, Sans-Serif; 
 
    color: black; 
 
} 
 

 
#mybtn1 { 
 
    position: relative; 
 
    font: bold 12px/50px Arial, Sans-Serif; 
 
    width: 400px; 
 
    height: 200px; 
 
    top: -210px; 
 
    left: 110px; 
 
    float: right; 
 
    transition: transform 0.5s ease; 
 
    border: 2px solid #a1a1a1; 
 
    border-radius: 15px; 
 
    background-color: ; 
 
    overflow: hidden; 
 
} 
 

 
#mybtn1:hover { 
 
    transform: scale(1.25); 
 
} 
 

 
#div1 { 
 
    height: 400px; 
 
    margin-top: 90px; 
 
} 
 

 
#div1 img { 
 
    height: 400px; 
 
} 
 

 
#mybtn1 img { 
 
    position: relative; 
 
    margin-top: -50px; 
 
    float: left; 
 
    width: 30%; 
 
    margin: auto 10px; 
 
} 
 

 
#mybtn1 h1, 
 
#mybtn1 p { 
 
    margin-left: 140px; 
 
    /* = image width + 8 */ 
 
    margin-top: 10px; 
 
    position: relative; 
 
    line-height: 1.1em; 
 
} 
 

 
#mybtn1 h1 { 
 
    left: 50px; 
 
} 
 

 

 
}

<html> 
 

 
<body> 
 

 
    <div id="div1"> 
 
    <img src="rice.jpg" /> 
 
    </div> 
 

 
    <div id="div2">DIV 2</div> 
 
    <ul> 
 
    <li> 
 
     <div id="mybtn1"> 
 
     <h1>Title </h1> 
 
     <img src="logo1.png" /> 
 
     <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. R</p> 
 
     <svg class="icon-arrow" viewBox="0 0 137.648 256"> 
 
\t \t \t \t <polygon class="line" points="0,246.161 9.843,256 137.648,128.2 137.451,128.003 137.648,127.806 9.843,0 0,9.833 118.167,127.996 " style="stroke-width:2"></polygon> 
 
\t \t \t \t </svg> 
 
     </div </li> 
 
     <ul> 
 
</body> 
 

 

 
</html>

來源

2017-07-31 Chris

您不包括圖像。 – the4kman

它的說，我不能把圖像，所以請檢查這個http://www.polymtl.ca/gch/sites/gch.amigow.polymtl.ca/files/anglais_mars_2017-100_1.jpg。徽標將位於左側，中間位置是文本，箭頭位於右側角落（示例圖像沒有箭頭），希望您能明白。希望你能幫助我。謝謝！ – Chris

請在答案中加入圖片，如果您還沒有發佈圖片的權限，鏈接也可以。你可以這樣做**編輯**你的問題:) – Zabuza

你必須在代碼無效的語法，這個修正：

<li> 
    <div id="mybtn1"> 
    <h1>Title </h1> 
    <img src="logo1.png" /> 
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. R</p> 
    <svg class="icon-arrow" viewBox="0 0 137.648 256"> 
     <polygon class="line" points="0,246.161 9.843,256 137.648,128.2 137.451,128.003 137.648,127.806 9.843,0 0,9.833 118.167,127.996 " style="stroke-width:2"></polygon> 
    </svg> 
    </div> 
</li>

來源

2017-07-31 10:11:15 xiaocui

圖片，內容和div中的箭頭

回答

相關問題