带倾斜侧边和较圆角 | 带倾斜侧边和较圆角

本文介绍了带倾斜侧边和较圆角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在建立一个网站，要求按钮在按钮的左侧有倾斜。网站响应迅速，按钮也需要圆角。我也想避免使用背景图片。

有人能够给我一个解决方案吗？忽略按钮上的图标，我可以这样做。我只需要倾斜的一面。

  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.
Sample jsfiddle
body {
  background: lightblue;
  font-family: sans-serif;
}
div {
  background: purple;
  width: 200px;
  padding: 30px;
  border: 3px solid white;
  color: white;
}
<div>Some Text</div>
 解决方案 
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 hover effect 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>
                        这篇关于带倾斜侧边和较圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！