大佬教程收集整理的这篇文章主要介绍了css – 仅偏向元素的一侧，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我试过了：
#parallelogram-container { margin: 0 50px; } .parallelogram { BACkground: #008dd0; width: 200px; border: none; display: inline-block; height: 90px; -moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg); -webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg); transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg); transform-origin: 50% 50%; padding: 0px; margin: 0 1px; } .parallelogram:first-child { border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .parallelogram-btn { width: 60px; BACkground: #ffa008; color: #FFF; border: none; display: inline-block; height: 90px; -moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg); -webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg); transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg); border-bottom-right-radius: 5px; border-top-right-radius: 5px; transform-origin: 50% 50%; padding: 0px; margin: 0px; font-weight: 700; cursor: pointer; }
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
我不能像图像那样实现这一点：第一个平行四边形没有画在他的左侧,而最后一个平行四边形没有画在他的右侧.
有谁可以帮助我吗 ？
#parallelogram-container { margin: 0 50px; } .parallelogram{ position:relative; BACkground: #008dd0; width:100px; border:none; display:inline-block; height:90px; padding:0px; margin:0 1px; } .parallelogram:nth-child(1){ } .parallelogram:nth-child(2){ transform-origin: bottom left; -ms-transform: skew(-28deg,0deg); -webkit-transform: skew(-28deg,0deg); transform: skew(-28deg,0deg); margin-left:1px; } .parallelogram:nth-child(1):after { content: " "; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; BACkground:#008dd0; transform-origin:bottom left; -ms-transform: skew(-28deg,0deg); } .parallelogram-btn:before { content: " "; position: absolute; display: block; width: 100%; height: 100%; left: -51px; z-index: -1; BACkground: #ffa008; transform-origin: bottom left; -ms-transform: skew(-28deg,0deg); } .parallelogram:first-child { border-bottom-left-radius:5px; border-top-left-radius: 5px; } .parallelogram-btn { width: 60px; position:relative; BACkground:#ffa008; color:#FFF; border: none; display:inline-block; height:90px; border-bottom-right-radius:5px; border-top-right-radius:5px; padding:0px; margin-left:51px; font-weight:700; cursor:pointer; }
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
以上是大佬教程为你收集整理的css – 仅偏向元素的一侧全部内容，希望文章能够帮你解决css – 仅偏向元素的一侧所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。