Metinler kenarlıklara nasıl yerleştirilir? (HTML, CSS)

Açık belgelerimi, katlanmamış kağıt gibi görünecek şekilde yığdım. Her divana metin ayırmak, bölümlere ayırmak istiyorum.Metinler kenarlıklara nasıl yerleştirilir? (HTML, CSS)

Ancak, div'larımı yapma biçimim, yalnızca görünen kısımlar sınırlardır. Metinleri divlere eklediğimde, metin, gösterilmesi gerekenin üstünde veya altında görünür (çünkü görünmeyen div'lardalar).

Temel olarak, div'larım görünmezdir. Sınırlarım görünür. Sınırlarda görünmesi gereken metne ihtiyacım var. Fakat bunu yapmak için, her bir metin bloğu için dolguyu değiştirmek zorundayım. Metinleri sadece sınırlara koymanın bir yolu var mı? Ya da eğimli div'ları almanın daha kolay bir yolu var mı?

rotateY'u denedim ancak yalnızca bunları küçültüyor.

Yakalama - sadece HTML ve CSS kullanabilirim. İşte

şu anda göründüğü nasıl bir görüntü var:

CSS:

#slant1 { 
width: 700px; 
height: 225px; 
background-color: white; 
font-family: thorndale for vst; 
font-size: 16px; 
} 

#slant2 { 
border-top: 260px solid #F2F2F2; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 2600px; 
width: 600px; 
position: absolute; 
z-index: -1; 
} 

#slant3 { 
border-bottom: 225px solid #E6E6E6; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 225px; 
width: 600px; 
font-family: thorndale for vst; 
font-size: 16px; 
} 

#slant4 { 
border-top: 225px solid #F2F2F2; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 225px; 
width: 600px; 
} 




<!DOCTYPE html> 
<html lang="en" id="Origami"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Origami</title> 
<link href="discover.css" rel="stylesheet" type="text/css" /> 
<meta name="description" content="Origami" /> 
<meta name="keywords" content="Origami"> 
<meta name="author" content="JojoRae" /> 
</head> 
<body> 
<div id="columnwrapper2"> 
<div id="slant1"> 
<div class="adamas1"></div> <div class="adamas"></div> 
<p class="p"> 
</p> 
</div> 
<div id="slant2"> 
<ul class="slides"> 
<input type="radio" name="group3" id="img-11" checked /> 
<li class="slide-container"> 
<div class="slide"> 
<img src="../ei/treasure.gif" /> 
</div> 
<div class="nav"> 
<label for="img-15" class="prev">&#x2039;</label> 
<label for="img-12" class="next">&#x203a;</label> 
</div> 
</li> 
</ul> 
</div> 
<div id="slant3"> 
<div class="adamas3"></div> 
<p class="p2"></p> 
</div> 
<div id="slant4"> 
</div> 
</div> <!--closes columnwrapper--> 
</body> 
</html>

kaynak

2015-12-14 Jenn

Bize HTML yapınızı gösterebilir misiniz? –

CSS, HTML ile yakın bir şekilde çalışır, dolayısıyla CSS olmasına rağmen, eksik olan HTML'dir. Sayfanın HTML kaynağını kopyalayıp bu soruyu içerecek şekilde güncelleyebilmenin herhangi bir yolu var mı? Teşekkürler – user454038

Şahsen sınır seçeneği (biraz hacky var) dışarıda bırakın ve bir şey ile gider farklı (ve muhtemelen daha kolay).

1) Bu bir çalıştı ama işe yaramadı

CSS3 3D Dönüşümü kullanarak: Burada seçeneklerin bir çift. rotateY (yalnızca küçüldü) kullanırken bulduğunuz sorun, perspective ile birleştirmediğinizden dolayı görünüyor. Bunu yaptıktan sonra (ve değerlerle biraz oynayın, böylece aradığınıza göre ayarlanır), sadece div, aynı zamanda kağıt etkisi ile aynı açıya sahip gibi görünmesini sağlayacak şekilde eğilecek.

html, body { 
 
    background:#444; 
 
} 
 

 
#columnwrapper2 { 
 
    min-width:700px; 
 
} 
 

 
.slant { 
 
    margin:auto auto; 
 
} 
 

 
#slant1 { 
 
    width: 700px; 
 
    height: 225px; 
 
    background-color: white; 
 
    font-family: thorndale for vst; 
 
    font-size: 16px; 
 
} 
 

 
#slant2 { 
 
    width:655px; 
 
    height:225px; 
 
    background:#eee; 
 
    transform: perspective(600px) rotateX(-20deg); 
 
} 
 

 
#slant3 { 
 
    width:668px; 
 
    height:225px; 
 
    background:#ddd; 
 
    transform: perspective(600px) rotateX(20deg) translateY(-33px); 
 
} 
 

 
#slant4 { 
 
    width:642px; 
 
    height:225px; 
 
    background:#eee; 
 
    transform: perspective(600px) rotateX(-20deg) translateY(-33px); 
 
}

<div id="columnwrapper2"> 
 
    <div id="slant1" class="slant"> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit. 
 
    </div> 
 
    </div> 
 
    <div id="slant2" class="slant"> 
 
    <div> 
 
     <img src="http://lorempixel.com/500/200/people" alt="Random Picture" /> 
 
    </div> 
 
    </div> 
 
    <div id="slant3" class="slant"> 
 
    <div> 
 
     Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet. 
 
    </div> 
 
    </div> 
 
    <div id="slant4" class="slant"> 
 
    <div> 
 
     Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien. 
 
    </div> 
 
    </div> 
 
</div> <!--closes columnwrapper-->

2) SVG'yi Başka bir seçenek SVG'yi kullanmak olacaktır

kullanılması: burada

bir örnek ( also available on this JSFiddle) 'dir. Bu, metnin kağıt katlama efektiyle (veya sayılarla oynamayı gerektirmeyen) çarpmasını istemiyorsanız daha kolay bir alternatif olabilir. Her bölümün tam yüksekliğini bilmeniz gerekecek.

Sen (doğrudan görüntü olarak ya da kod aşağıdaki gibi) SVG bir görüntü oluşturmak ve #columnwrapper2 arka planında yerleştirin olabilir, içeriğin kalan görüntünün üst kısmında gider.Eğer IE ile bazı sorunları bulabilir, SVG

html, body { 
 
    background:#444; 
 
} 
 

 
#columnwrapper2 { 
 
    width:700px; 
 
    position:relative; 
 
} 
 

 
.slant { 
 
    margin:auto auto; 
 
    height:250px; 
 
    width:600px; 
 
    padding:50px auto; 
 
    z-index:2; 
 
    position:relative; 
 
}

<div id="columnwrapper2"> 
 
    <svg width="700px" height="1000px" style="position:absolute;top:0;left:0;z-index:1;"> 
 
    <path fill="#ffffff" d="M0,0 700,0 700,250 0,250Z" /> 
 
    <path fill="#eeeeee" d="M0,250 700,250 650,500 50,500Z" /> 
 
    <path fill="#dddddd" d="M50,500 650,500 700,750 0,750Z" /> 
 
    <path fill="#eeeeee" d="M0,750 700,750 650,1000 50,1000Z" /> 
 
    </svg> 
 
    <div id="slant1" class="slant"> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit. 
 
    </div> 
 
    </div> 
 
    <div id="slant2" class="slant"> 
 
    <div> 
 
     <img src="http://lorempixel.com/500/200/people" alt="Random Picture" /> 
 
    </div> 
 
    </div> 
 
    <div id="slant3" class="slant"> 
 
    <div> 
 
     Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet. 
 
    </div> 
 
    </div> 
 
    <div id="slant4" class="slant"> 
 
    <div> 
 
     Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien. 
 
    </div> 
 
    </div> 
 
</div> <!--closes columnwrapper-->

bir avantajı önceki transform çözeltisiyle (çoğu tarayıcı tarafından desteklenir olmasıdır:

bu demo (also available on this JSFiddle) Bkz Tweaking gerekecek).

kaynak

2015-12-14 12:57:33

Metinler kenarlıklara nasıl yerleştirilir? (HTML, CSS)

cevap

İlgili konular