大佬教程收集整理的这篇文章主要介绍了css倾斜元素并获得内部圆形边框顶部,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是图形设计:
我更倾向于倾斜,例如:倾斜(-40deg).但这个想法是有一个内部的圆形边框,就像在图像中一样包裹着那个按键.
html很简单:
<header> <nav></nav> </header>
css:
body > header > nav { display: flex; align-items: flex-end; justify-content: center; width: 100vw; height: 90px; padding: 10px 0; text-align: center; z-index: 1 } body > header > nav::before { content: ''; position: absolute; top: 0; left: 0; width: 80vw; height: 100%; BACkground-color: rgb(147,147,147); border-bottom-right-radius: 15px; transform: skew(-40deg); transform-origin: 100% 0%; } body > header > nav::after { content: ''; position: absolute; top: 0; right: 0; width: 28.7%; border-top: 7px solid rgb(147,147); border-left: 50px solid rgb(147,147); height: 75px; border-top-left-radius: 75px; transform: skew(-33deg); }
我准备了https://jsfiddle.net/uj4qsf37/
有更清洁的方法吗?喜欢不必使用两个元素?使用一个元素可以很容易地使其响应.
.header { border-top: 20px solid blue; height:100px; position: relative; overflow: hidden; } .header:before,.header:after { content: ""; vertical-align:top; display: inline-block; transform-origin: top right; transform: skew(-40deg); } .header:before { height: 100%; width: 50%; border-radius: 0 0 20px 0; BACkground: blue; } .header:after { height: 20px; width: 20px; margin-left:-1px; BACkground: radial-gradient(circle at bottom right,transparent 68%,blue 73%); } /*to illustrate different values of skew*/ .header:before,.header:after { animation:change 2s linear infinite alternate; } @keyframes change{ from{transform: skew(0deg);} top{transform: skew(-40deg);} }
<div class="header"></div>
以上是大佬教程为你收集整理的css倾斜元素并获得内部圆形边框顶部全部内容,希望文章能够帮你解决css倾斜元素并获得内部圆形边框顶部所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。