带倾斜侧边和较圆角 [英] div with slanted side and rounder corners
本文介绍了带倾斜侧边和较圆角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在建立一个网站，要求按钮在按钮的左侧有倾斜。网站响应迅速，按钮也需要圆角。我也想避免使用背景图片。
有人能够给我一个解决方案吗？忽略按钮上的图标，我可以这样做。我只需要倾斜的一面。
body {background：lightblue; font-family：sans-serif;} div {background：purple; width：200px; padding：30px; border：3px solid white; color：white;}
< div> Some Text< / div>
解决方案
注意：我添加了一个单独的答案，因为虽然我在评论中链接的答案似乎提供了一个解决方案，这一点是有点复杂，由于存在边框
可以使用以下部分创建形状：
- 一个相对定位的主容器元素。
- 两个伪元素，大约是父元素宽度的一半。一个元素倾斜以产生倾斜的左侧，而另一个不倾斜。
- 倾斜的伪元素位于左侧，而正常元素位于容器的右侧元素。
- 倾斜伪元素只有顶部，左侧和底部边框。右边界被省略，因为它将在形状的中间直接出现。对于没有偏斜的伪元素，由于相同的原因避免了左边界。
- 偏斜伪元素的左边界比其他边界更厚一些，因为偏斜我还添加了一个
hover
.outer {position：relative; height：75px; width：300px; text-align：center; line-height：75px;颜色：白色; text-transform：uppercase;}。outer：before，.outer：after {position：absolute; content：''; top：0px;高度：100％;宽度：55％;背景：紫色; border：2px solid white; border-left-width：3px; z-index：-1;}。outer：before {left：0px; border-radius：20px; border-right：none; transform：skew（20deg）; transform-origin：top left;}。outer：after {right：0px; border-top-right-radius：20px; border-bottom-right-radius：20px; border-left：none;} / *只是用于响应自然的演示* /。outer {transition：all 1s;} outer：hover {height：100px; width：400px; line-height：100px;} body {background：lightblue;}< div class ='outer'>回电给我< / div>
/ strong>
- 这种方法的一大优点是它提供了一个优雅的后备。也就是说，在非CSS3兼容的浏览器中，它将看起来像带有圆角（没有倾斜边）的普通按钮。
- 页面（或容器元素）背景不需要是纯色。
- 形状本身可以具有非实体颜色（即图像或渐变）作为背景。这需要一些额外的调整，但方法本身将保持不变。
下面的代码段，我已给每个组件不同的颜色，以直观地说明如何实现形状：
.outer {position：relative; height：75px; width：300px; text-align：center; line-height：75px;颜色：白色; text-transform：uppercase;}。outer：before，.outer：after {position：absolute; content：''; top：0px;高度：100％;宽度：55％;背景：紫色; border：2px solid white; border-left-width：3px; z-index：-1;}。outer：before {left：0px; border-radius：20px; border-right：none; transform：skew（20deg）; transform-origin：top left;背景：seagreen; border-color：red;}。outer：after {right：0px; border-top-right-radius：20px; border-bottom-right-radius：20px; border-left：none;背景：yellowgreen; border-color：maroon;} / *只是为了响应自然的演示* /。outer {transition：all 1s;} outer：hover {height：100px; width：400px; line-height：100px;} body {background：lightblue;}< div class ='outer'>回电给我< / div>I am currently building a website which requires buttons to have a slant on the left hand side of the button. The website is responsive and the button requires rounded corners too. I am trying to avoid using background images too.
Would someone be able to show me a solution to this? Ignore the icon on the button, I am able to do this. I just need the slanted side.
body { background: lightblue; font-family: sans-serif; } div { background: purple; width: 200px; padding: 30px; border: 3px solid white; color: white; }<div>Some Text</div>解决方案Note: I am adding a separate answer because though the answers that I linked in comment seem to give a solution, this one is a bit more complex due to the presence of border also along with the border-radius.
The shape can be created by using the following parts:
- One main container element which is positioned relatively.
- Two pseudo-elements which are roughly half the width of parent element. One element is skewed to produce the skewed left side whereas the other is not skewed.
- The skewed pseudo-element is positioned at the left while the normal element is positioned at the right of the container element.
- The skewed pseudo-element has only top, left and bottom borders. The right border is omitted as it would come right in the middle of the shape. For the pseudo-element that is not skewed, the left border is avoided for the same reason.
- Left border of the skewed pseudo-element is a bit more thicker than other borders because skew makes the border look thinner than it actually is.
I have also added a
hovereffect to the snippet to demonstrate the responsive nature of the shape..outer { position: relative; height: 75px; width: 300px; text-align: center; line-height: 75px; color: white; text-transform: uppercase; } .outer:before, .outer:after { position: absolute; content: ''; top: 0px; height: 100%; width: 55%; background: purple; border: 2px solid white; border-left-width: 3px; z-index: -1; } .outer:before { left: 0px; border-radius: 20px; border-right: none; transform: skew(20deg); transform-origin: top left; } .outer:after { right: 0px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-left: none; } /* Just for demo of responsive nature */ .outer{ transition: all 1s; } .outer:hover{ height: 100px; width: 400px; line-height: 100px; } body{ background: lightblue; }<div class='outer'> Call me back </div>Advantage:
- A big advantage of this approach is that it provides a graceful fallback. That is, in non CSS3 compliant browsers it would look like normal button with rounded corners (and no slanted side).
- The page (or container element) background need not be a solid color.
- The shape itself can have non-solid colors (that is, images or gradients) as background. It would need some extra tweaking but the approach itself will remain same.
In the below snippet, I have given each component a different color to visually illustrate how the shape is achieved:
.outer { position: relative; height: 75px; width: 300px; text-align: center; line-height: 75px; color: white; text-transform: uppercase; } .outer:before, .outer:after { position: absolute; content: ''; top: 0px; height: 100%; width: 55%; background: purple; border: 2px solid white; border-left-width: 3px; z-index: -1; } .outer:before { left: 0px; border-radius: 20px; border-right: none; transform: skew(20deg); transform-origin: top left; background: seagreen; border-color: red; } .outer:after { right: 0px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-left: none; background: yellowgreen; border-color: maroon; } /* Just for demo of responsive nature */ .outer{ transition: all 1s; } .outer:hover{ height: 100px; width: 400px; line-height: 100px; } body{ background: lightblue; }<div class='outer'> Call me back </div>这篇关于带倾斜侧边和较圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
