javascript — не совсем шестиугольник с CSS

Не совсем шестиугольник с CSS

Я сделал вам пример ниже, используя путь клипа. Я лично хотел бы использовать svg из-за поддержки браузера (хотя пока не вижу проблемы с полигоном). См. Https://caniuse.com/#search=clip path Наслаждайтесь и дайте мне знать, если у вас есть какие-либо вопросы :) Я также добавил пару других трюков CSS, которые я использовал много раз за эти годы.

 body { margin: 0; padding: 0; box-sizing: border-box; } .hero-section { width: 100%; height: 100vh; min-height: 500px; background-image: url(http://placeimg.com/1000/480/any); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .shape-section { width: calc(100% - 5%); max-width: 500px; height: 40vh; min-height: 250px; background-color: white; position: absolute; bottom: 0; left: 0; clip-path: polygon(77% 5%, 100% 31%, 82% 100%, 0 100%, 0 0); display: flex; justify-content: center; align-items: center; flex-direction: column; } .title { margin-right: auto; max-width: 70%; margin-left: 24px; } .info { margin-right: auto; max-width: 70%; margin-left: 24px; } .cta-button { background-color: #FF5733; border-radius: 6px; border: 1px solid #900c3f; color: white; margin-right: auto; margin-left: 24px; transition: all .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); font-size: 16px; padding: 8px 30px; } .cta-button:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.3); transform: translateY(-2px); cursor: pointer; } 
 {amp}lt;div class="hero-section"{amp}gt; {amp}lt;div class="shape-section"{amp}gt; {amp}lt;h1 class="title"{amp}gt;Meet out People{amp}lt;/h1{amp}gt; {amp}lt;p class="info"{amp}gt;Der dee herpderpsmer merp re herp derp derps. Ter mer merpus derp perp cerp le sherp? Ler se terp, mer nerpy.{amp}lt;/p{amp}gt; {amp}lt;button class="cta-button"{amp}gt;Do Stuff{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector