形状与倾斜的一面（敏感）
我正在尝试创build一个如下图所示的形状，仅在一侧 （例如底侧） 倾斜边缘，而其他边缘保持笔直。
我尝试使用边框方法（代码如下），但我的形状的尺寸是dynamic的，因此我不能使用此方法。
.shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape">Some content</div>
我也尝试使用渐变背景（如下面的代码），但随着尺寸的变化，它会变得混乱。 你可以看到我的意思是盘旋在下面的片段的形状。
.gradient { display: inline-block; vertical-align: top; height: 200px; width: 100px; margin: 10px; color: beige; transition: all 1s; padding: 10px; background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat; } .gradient:hover { width: 200px; }
<div class="gradient"></div>
我怎样才能创造这个倾斜的一面 ，也能够支持dynamic尺寸 ？
有许多方法只能在一侧创build倾斜边缘的形状。
以下方法不能支持问题中已经提到的dynamic大小：
- 带有
border-width像素值的边框三angular形方法。 - 线性渐变与angular度语法（如45度，30度等）。
下面介绍可以支持dynamic大小的方法。
方法1 – SVG
（ 浏览器兼容性 ）
SVG可以用来通过使用polygon或path来生成形状。 下面的代码片段使用了polygon 。 任何需要的文本内容都可以放置在形状的顶部。
$(document).ready(function() { $('#increasew-vector').on('click', function() { $('.vector').css({ 'width': '150px', 'height': '100px' }); }); $('#increaseh-vector').on('click', function() { $('.vector').css({ 'width': '100px', 'height': '150px' }); }); $('#increaseb-vector').on('click', function() { $('.vector').css({ 'width': '150px', 'height': '150px' }); }); })
div { float: left; height: 100px; width: 100px; margin: 20px; color: beige; transition: all 1s; } .vector { position: relative; } svg { position: absolute; margin: 10px; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 0; } polygon { fill: tomato; } .vector > span { position: absolute; display: block; padding: 10px; z-index: 1; } .vector.top > span{ height: 50%; width: 100%; top: calc(40% + 5px); /* size of the angled area + buffer */ left: 5px; } .vector.bottom > span{ height: 50%; width: 100%; top: 5px; left: 5px; } .vector.left > span{ width: 50%; height: 100%; left: 50%; /* size of the angled area */ top: 5px; } .vector.right > span{ width: 50%; height: 100%; left: 5px; top: 5px; } /* Just for demo */ body { background: radial-gradient(circle at 50% 50%, aliceblue, steelblue); } polygon:hover, span:hover + svg > polygon{ fill: steelblue; } .btn-container { position: absolute; top: 0px; right: 0px; width: 150px; } button { width: 150px; margin-bottom: 10px; } .vector.left{ clear: both; }
<script src="ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="vector bottom"> <span>Some content</span> <svg viewBox="0 0 40 100" preserveAspectRatio="none"> <polygon points="0,0 40,0 40,100 0,60" /> </svg> </div> <div class="vector top"> <span>Some content</span> <svg viewBox="0 0 40 100" preserveAspectRatio="none"> <polygon points="0,40 40,0 40,100 0,100" /> </svg> </div> <div class="vector left"> <span>Some content</span> <svg viewBox="0 0 40 100" preserveAspectRatio="none"> <polygon points="0,0 40,0 40,100 20,100" /> </svg> </div> <div class="vector right"> <span>Some content</span> <svg viewBox="0 0 40 100" preserveAspectRatio="none"> <polygon points="0,0 20,0 40,100 0,100" /> </svg> </div> <div class='btn-container'> <button id="increasew-vector">Increase Width</button> <button id="increaseh-vector">Increase Height</button> <button id="increaseb-vector">Increase Both</button> </div>
我尝试使用边框方法，但我的形状的尺寸是dynamic的，因此我不能使用这种方法。
方法7 – 视口单位（边界重做 ）
（ 浏览器兼容性 ）
视口单元是CSS3中的一个很棒的创新。 虽然您通常可以使用百分比值来dynamic化您的属性，但您不能在border-width （ 也不适用于font-size ）。
与视口单位相反， 您可以dynamic设置您的边框宽度 ，以及与视口尺寸相比的对象尺寸。
注意：百分比值被引用到父对象，而不是视口（窗口的可见区域）。
要testing该方法，请启动以下片段“整页” ，然后水平和垂直调整它的大小。
.shape { position: relative; height: 20vh; width: 40vw; background: tomato; } .shape:after { position: absolute; content: ''; left: 0px; right: 0px; top: 20vh; border-width: 10vh 20vw; border-style: solid; border-color: tomato tomato rgba(0,0,0,0) rgba(0,0,0,0); }
<div class="shape">Some content</div>
