橫跨包含使用CSS的文本的頁面banderole

我試圖在使用CSS的頁面上創建一個橫幅（我希望這是正確的詞）。
我想達到的目標：
理想的封條應響應和包裹中某些元素，這樣我可以把這些封條的多個頁，一個在另一個之下上。
我曾嘗試自己建立一個封條，但結果遠不是我想要的：橫跨包含使用CSS的文本的頁面banderole

HTML：

<div class="section"> 
    <div class="banderole"> 
    <div class="banderole-content"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
     sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    </div> 
</div>

CSS：

.banderole { 
    width: 600px; 
    height: 300px; 
    background-color: green; 
    position: absolute; 
    top: 25px; 
    left: 50px; 
    text-align: center; 
    color: #f0f0f0; 
    transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 
    } 

    .banderole-content { 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    } 

    .section { 
    background-color: black; 
    }

JSFiddle

是否有可能在CSS中建立這樣一個班德羅？

在此先感謝您的幫助

來源

2016-11-18 lx4r

您可以使用CSS變換的translate()和skew()性能。

看一看片斷如下（使用全頁視圖正常觀看）：

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    background: green; 
 
    position: relative; 
 
} 
 

 
.content-holder { 
 
    position: absolute; 
 
    background: #fff; 
 
    width: 350px; 
 
    height: 100vh; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) skew(-20deg); 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    width: 250px; 
 
} 
 

 
.top { 
 
    top: 25%; 
 
    left: 55%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.bottom { 
 
    top: 75%; 
 
    left: 45%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="content-holder"></div> 
 

 
<div class="text top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi molestiae repellat rerum quam quos incidunt, dolore delectus necessitatibus nobis, nesciunt dolorum odio, blanditiis minus iusto, ratione id. Est, sit, ut.</div> 
 

 
<div class="text bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi molestiae repellat rerum quam quos incidunt, dolore delectus necessitatibus nobis, nesciunt dolorum odio, blanditiis minus iusto, ratione id. Est, sit, ut.</div>

希望這有助於！

來源

2016-11-19 17:44:27

這看起來不錯，非常感謝！您是否介意說明'top：'，'bottom'和'content-holder'的'transform：translate（-50％，-50％）'的用法？對於我來說這很令人困惑，因爲這個位置已經被'top'和'left'屬性設置了。在此先感謝。 :-) – lx4r

@ lx4r這是我的榮幸！ 'transform：translate（-50％，-50％）'用於將'.content-holder'居中，因爲它們已經設置爲'top：50％'＆'left：50％'，所以'transform'財產再次將'-50％'從原點重新設置爲中心。如果這個答案真的幫助了你，請接受它。 –

嘗試用transform: skew()方法：

.banderole { 
 
    width: 100px; 
 
    height: 100%; 
 
    background-color: green; 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    color: #f0f0f0; 
 
    -webkit-transform: skew(-20deg, 0); 
 
    -moz-transform: skew(-20deg, 0); 
 
    -o-transform: skew(-20deg, 0); 
 
    -ms-transform: skew(-20deg, 0); 
 
    transform: skew(-20deg, 0); 
 
} 
 
.section { 
 
    background-color: black; 
 
}

<div class="section"> 
 
    <div class="banderole"> 
 
    <div class="banderole-content"> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
     sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    </div> 
 
</div>

JSFiddle

來源

2016-11-18 14:58:01 Arkej

謝謝你的回答，但你的代碼也會旋轉banderole內的文字（除此之外它是完美的）。 – lx4r

橫跨包含使用CSS的文本的頁面banderole

回答

相關問題