2017-06-20 189 views
0

我創建了保證金和一個三角形在中間的明星箭頭向下中心的4列的佈局......做出響應的CSS + HTML設計

,這是很好的工作在我的電腦: enter image description here

但三角形和星是遠來響應,只有這樣,我實現了正確定位它是絕對位置:

.triangle-down { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 318px; 
    width: 0; 
    height: 0; 
    border-left: 532px solid transparent; 
    border-right: 532px solid transparent; 
    border-top: 400px solid blue; 
} 

.star { 
    display: block; 
    position: absolute; 
    vertical-align: middle; 
    font-size: 250px; 
    text-align: center; 
    color: white; 
    top: -434px; 
    left: -109px; 
} 

我怎樣才能把元素在他人之上,並使它在s中響應Ame方式列和它的利潤率?

注:

  • 佈局是一個倒計時,但是JavaScript並不是對這個問題很重要。
  • 你可以找到一個功能(沒有JS)小提琴here
  • 你可以看到實際的結果(與JS)here
  • 我可以使用sass如果有必要
+0

所以,你需要才達到相同的結果,關於圖片,但在迴應的方式? – QuestionAndAnswer

+0

@QuestionAndAnswer yes ....或者至少可以以某種方式調整大小... – joc

回答

4

這個怎麼樣更新小提琴?

https://jsfiddle.net/ondrakoupil/0rtvcnon/11/

基本上,這些都是變化:

  • 使用Flexbox的列布局
  • 尺寸使用視區相對單位(VW)測量
  • 三角形作爲標準的矩形創建<div>並通過CSS旋轉 - 您可以更好地控制其位置和大小

使用了一些CSS3技術。對於IE,你需要在CSS中使用前綴(使用Autoprefixer)。其他瀏覽器應該「照原樣」處理它。

html, body { 
 
    height: 100%; 
 
    margin: auto; 
 
    padding-left:1%; 
 
    background: yellow; 
 
    font: normal 16px 'Roboto', sans-serif; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    width: 80%; 
 
    height: 100%; 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.bar { 
 
    background: red; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    color: yellow; 
 
    width: 15%; 
 
} 
 

 
.init { 
 
    position:absolute; 
 
    bottom: 10px; 
 
    right: 20px; 
 
    background: yellow; 
 
    margin-left: 0px; 
 
    font-weight: 700; 
 
    text-align: right; 
 
    color: red; 
 
} 
 

 
a:link, a:visited { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 

 

 
::-moz-selection { 
 
    color: yellow; 
 
    background: red; 
 
} 
 

 
::selection { 
 
    color: yellow; 
 
    background: red; 
 
} 
 

 
p.numbers { 
 
    font-size: 8vw; 
 
    margin-top: 45vw; 
 
    margin-bottom: 20px; 
 
} 
 

 
p.meta, p.strings { 
 
    font-size: 2vw; 
 
} 
 

 
h1 { 
 
    font-size: 4.5em; 
 
} 
 

 
.triangle-down { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    pointer-events: none; 
 
} 
 

 
.triangle-color { 
 
    margin: auto; 
 
    width: calc(80vw/1.4142); 
 
    height: calc(80vw/1.4142); /* sqrt of 2 */ 
 
    background-color: blue; 
 
    transform: translateY(calc(-1 * 80vw/1.4142/2)) rotate(45deg); 
 
} 
 

 
.star { 
 
    position: absolute; 
 
    vertical-align: middle; 
 
    font-size: 15vw; 
 
    text-align: center; 
 
    color: white; 
 
    top: 5vw; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
}
<body> 
 
    <div class="container">  
 
     <div class="triangle-down"> 
 
     <div class="triangle-color"></div> 
 
      <div class="star">&#9733;</div> 
 
     </div> 
 
     <div class="bar"> 
 
      <p id="d" class="numbers days">00</p> 
 
      <p class="strings">DIES</p> 
 
     </div> 
 
     <div class="bar"> 
 
      <p id="h" class="numbers hours">00</p> 
 
      <p class="strings">HORES</p> 
 
     </div> 
 
     <div class="bar"> 
 
      <p id="m" class="numbers minutes">00</p> 
 
      <p class="strings">MINUTS</p> 
 
     </div> 
 
     <div class="bar"> 
 
      <p id="s" class="numbers seconds">00</p> 
 
      <p class="strings">SEGONS</p> 
 
     </div> 
 
    </div> 
 
    <div class="init"> 
 
     <a href="http://www.xocdetrens.cat/inici/" target="_blank">ENTRA</a> 
 
    </div>  
 
</body>

1

看看這個。我需要從頭開始重寫它,因爲你有很多絕對值,並且他們都是通過js來計算的,據我所知。希望這會滿足你的要求。

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    font: normal 16px 'Roboto', sans-serif; 
 
    position: relative; 
 
} 
 

 
.triangle-aspect-keeper { 
 
    width: 50%; 
 
    padding-bottom: 50%; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.triangle-container { 
 
    
 
} 
 

 
.triangle-down { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    top: -50%; 
 
    left: 0; 
 
} 
 

 
.star { 
 
    font-size: 1100%; 
 
    text-align: center; 
 
    color: white; 
 
    width: 100%; 
 
    line-height: 200%; /* control star vertical position */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.bar-container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.bar-inner-container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/ 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.bar:first-child { 
 
    margin-left: 0; 
 
} 
 

 
.bar { 
 
    background-color: red; 
 
    height: 100%; 
 
    width: 15%; 
 
    color: yellow; 
 
    font-weight: 700; 
 
} 
 

 
p.numbers { 
 
    font-size: 5em; 
 
    margin-top: 350%; 
 
} 
 

 
p.meta, p.strings { 
 
    font-sie: 1.5em; 
 
} 
 

 
a:link, a:visited { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 

 
.init { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    padding: 10px; 
 
    font-weight: 700; 
 
}
<body> 
 
    <div class="container"> 
 
     <div class="bar-container"> 
 
      <div class="bar-inner-container"> 
 
       <div class="bar bar-first"> 
 
        <p id="d" class="numbers days">00</p><br> 
 
        <p class="strings">DIES</p><br> 
 
       </div> 
 
       <div class="bar bar-second"> 
 
        <p id="h" class="numbers hours">00</p><br> 
 
        <p class="strings">HORES</p><br> 
 
       </div> 
 
       <div class="bar bar-third"> 
 
        <p id="m" class="numbers minutes">00</p><br> 
 
        <p class="strings">MINUTS</p><br> 
 
       </div> 
 
       <div class="bar bar-fourth"> 
 
        <p id="s" class="numbers seconds">00</p><br> 
 
        <p class="strings">SEGONS</p><br> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="triangle-aspect-keeper"> 
 
      <div class="triangle-container"> 
 
       <div class="triangle-down"></div> 
 
       <div class="star">&#9733;</div> 
 
      </div> 
 
     </div> 
 
     <div class="init"> 
 
      <a href="http://www.xocdetrens.cat/inici/" target="_blank">ENTRA</a> 
 
     </div> 
 
    </div> 
 
</body>

+1

對於遲到的回答感到抱歉,直到現在沒有時間...我真的很感謝你的工作,但這不是我所需要的,是固定的大小不能調整大小或響應...),我會在20分鐘內開始賞金,隨時提高您的答案;),另外,在我的建議中,沒有使用樣式元素的JavaScript ... – joc

+0

@joc,你見過嗎代碼中的評論說你可以使用persents或rems?看看'''.triangle-container'''。唯一硬編碼的東西是體寬,它只代表窗口大小和三角形大小,可以切換到百分比。你是如何測試這種佈局的可調整大小的? – QuestionAndAnswer

+0

@joc,你能解釋一下它在這種情況下不響應嗎?什麼打破了這裏的責任? – QuestionAndAnswer

0

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
html, 
 
body { 
 
    background: yellow; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
.row { 
 
    height: 100%; 
 
} 
 

 
.col-xs-3 { 
 
    height: 100%; 
 
} 
 

 
.col-xs-3, 
 
.col-xs-12 { 
 
    padding: 0 6.25%; 
 
} 
 

 
.bar { 
 
    color: yellow; 
 
    background: red; 
 
    min-height: 100%; 
 
    padding-top: 333%; 
 
} 
 

 
.triangle-down { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    z-index: 1; 
 
} 
 

 
.triangle-color { 
 
    margin-bottom: -30%; 
 
} 
 

 
.triangle-color * { 
 
    fill: blue 
 
} 
 

 
.star * { 
 
    fill: white 
 
} 
 

 
.numbers { 
 
    font-size: 5vw; 
 
    padding-bottom: 2vw; 
 
} 
 

 
.strings { 
 
    font-size: 1.5vw; 
 
}
<div class="container text-center"> 
 
    <div class="row triangle-down"> 
 
    <div class="col-xs-12"> 
 
     <svg class="triangle-color" viewBox="0 0 100 40"> 
 
     <polygon points="0,0 100,0 50,40"/> 
 
     </svg> 
 
     <svg class="star" viewBox="0 0 1400 188"> 
 
     <polygon points="700,0 640,188 790,68 610,68 760,188"/> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-3"> 
 
     <div class="bar"> 
 
     <div class="numbers">00</div> 
 
     <div class="strings">DIES</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="bar"> 
 
     <div class="numbers">00</div> 
 
     <div class="strings">HORES</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="bar"> 
 
     <div class="numbers">00</div> 
 
     <div class="strings">MINUTS</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="bar"> 
 
     <div class="numbers">00</div> 
 
     <div class="strings">SEGONS</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

0

你可以簡單地做到這一點。

HTML:

<div class="parent"> 
    <div class="triangle"> 
    <div class="star"> 
     ... 
    </div> 
    </div> 
</div> 

CSS:

.parent { 
    width: xx%; /*Whatever percentage*/ 
    height: yy%; /*Whatever percentage*/ 
    margin: 0 auto; 
    position: relative; 
} 

.triangle { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.star { 
    font-size: xx%; /*some percentage (assuming star is a font icon)*/ 
    position: absolute; 
    top: 15vh; 
    margin: 0 auto; 
}