Merhaba, burada HTML/CSS kullanarak zikzaklı kenarlıklar(borders) yapacağız.
Web sitelerinin veya uygulamaların estetik görünmesi, ve diğer sitelerden farklı görünmesini sağlamak için genellikle kavisli ve farklı şekillerde çerçeveler kullanıldığını görüyoruz. Zikzaklı kenarlıklar genellikle başlık görseli olan hizmetler, portföyler, bloglar vb. gibi yerlerde çok hoş olabilir, nasıl yapıldığı ve örnek kod aşağıda. CodePen’den bakın.
HTML
<div class="banner section-padding border">
<div class="banner-text">
<h2>Header Content</h2>
</div>
</div>
<div class="content">
<h3>Content Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit quos minima, ab accusamus velit enim iste temporibus autem nisi error natus commodi reiciendis sint veniam doloremque iure itaque architecto excepturi hic harum quam dignissimos, illo. Est vel suscipit magnam voluptas mollitia aliquid minus? Natus magnam dolor error at accusantium! Doloribus illo quisquam esse quidem pariatur, laudantium dolore accusantium atque unde fuga exercitationem enim adipisci eligendi et distinctio nam, dicta ab ea quis ipsum velit. Consequuntur est praesentium quod sint, in repellat reiciendis doloremque quae esse inventore nihil dignissimos a provident, eius ipsam labore assumenda, ducimus accusamus quos accusantium vero animi? Suscipit quidem aperiam laudantium porro, quia accusantium ea, minima mollitia, dicta repudiandae cumque est, sunt? Impedit officiis corporis ipsum sunt dicta eaque omnis quaerat debitis! Sequi eaque beatae esse minima at veritatis ipsa optio repudiandae quaerat, assumenda quasi enim reiciendis laudantium eum rem nam perspiciatis omnis, laboriosam nihil quae maxime cumque. Eligendi id doloribus, vero reprehenderit quae, illum odio unde ratione error quo minus, voluptate dolorum sed laborum. Magni dolor neque labore repudiandae consequatur eaque quas fugit cumque culpa voluptatibus pariatur recusandae enim debitis alias similique molestias corporis nisi, sed, iste non. Cumque illum excepturi nostrum fugiat eligendi nobis consequuntur tempore cupiditate eum dolor voluptatibus non ipsa eos animi impedit maiores ipsam, ab accusantium nam beatae, modi, magnam dolores neque! Pariatur quae minima voluptate sequi fugit dolore nihil consectetur, itaque libero. Placeat qui dolor neque doloribus tempore soluta hic expedita recusandae saepe, accusantium veritatis perferendis. Unde ipsum deleniti deserunt porro recusandae nihil iste, voluptas omnis, harum laudantium ex tempora facere. Consectetur, neque ab rem a fuga cumque vero ratione id dolore earum error aliquid accusamus optio aperiam ex quibusdam eaque tenetur totam doloremque! Quo voluptas mollitia aspernatur id dicta, quia animi doloribus, sapiente enim sint dolorum vero molestias consequuntur possimus, voluptatum officiis. Illo placeat, nihil cum sequi voluptatum voluptates aspernatur nulla accusamus facilis et repellendus, officia. Aut non magnam quae omnis vel cum deserunt quam corporis maiores et soluta quisquam totam, nihil accusantium! Corrupti, natus aliquid eveniet illo error iure tenetur voluptatum omnis nesciunt repudiandae voluptate, quaerat officiis fugit, corporis nobis laboriosam ex, vitae aspernatur? Dicta impedit esse amet eveniet, laborum quam aspernatur, suscipit nesciunt reiciendis quidem perspiciatis nisi delectus praesentium, dignissimos perferendis omnis nostrum deserunt. Enim cum nam vel dolorum, sint praesentium quisquam quidem commodi animi. Voluptates ea ut beatae. Saepe nisi, nobis qui dolorem aspernatur animi eius deleniti vel quasi fugiat impedit itaque, repellat, sequi cupiditate blanditiis temporibus dolore nesciunt. Libero veritatis ratione nostrum excepturi iste ut minima sint dolores ab, voluptate et officia provident alias, modi voluptatibus consectetur officiis eveniet quidem suscipit quod minus. Esse, animi neque suscipit illo molestias veniam fugiat, dolor nam quam minima totam in tenetur nihil magni perspiciatis, quaerat soluta dolores vero error consequatur! Aut quis natus facilis perspiciatis esse vel enim provident quasi quam at porro, omnis doloremque eos odio expedita distinctio dolores? Perferendis, officiis minima vitae alias tempora inventore veritatis, aliquid incidunt explicabo rem quis neque minus nam adipisci! Iste, nemo.</p>
</div>
CSS
.section-padding{
padding: 80px 0;
}
.banner{
background-image: linear-gradient(to right, rgba(152, 9, 199, 0.7), rgba(152, 9, 199, 0.7)), url("https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
color: #fff;
height: 400px;
background-attachment: fixed;
}
.border{
position: relative;
}
.border:after{
background: linear-gradient(-45deg, #ffffff 10px, transparent 0), linear-gradient(45deg, #ffffff 10px, transparent 0);
background-position: left bottom;
background-repeat: repeat-x;
background-size: 12px 32px;
content: " ";
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
}
h2{
padding: 65px 0;
text-align: center;
font-size: 80px;
text-transform: uppercase;
}
.content{
font-size: 18px;
padding: 60px;
line-height: 1.9;
color: #262626;
}
.content h3{
font-size: 35px;
text-align: center;
}
Umarım bu basit ama heyecan verici projeyi beğenmişsinizdir. Bu blog ile bağlantıda kalmak için lütfen Twitter’dan, Facebook’dan veya Linkedin’den takip edin. Blogu ziyaret ettiğiniz için teşekkür ederim ve ziyaret etmeye devam edin.