分度倾斜的侧面圆润边角 [英] div with slanted side and rounder corners

问题描述

我目前正在建设一个网站，需要按钮对按钮的左侧 倾斜。该网站是反应灵敏，按键需要的圆角过。我试图避免使用背景图片了。

会有人能告诉我一个解决的办法？忽略按钮上的图标，我能做到这一点。我只需要倾斜的侧面。

样品的jsfiddle

\r

\r

{体\r
  背景：lightblue;\r
  FONT-FAMILY：无衬线;\r
}\r
DIV {\r
  背景：紫色;\r
  宽度：200像素;\r
  填充：30像素;\r
  边框：3PX白色固体;\r
  颜色：白色;\r
}

\r

＆LT; D​​IV＆GT;有的文字＆lt; / DIV＆GT;

\r

\r

\r

解决方案

  

注意：我由于边框的presence还加入了单独的答案，因为虽然我在评论链接的答案似乎给了一个解决方案，这个人是一个比较复杂随着边界半径。

的形状可以通过使用以下部件来创建

• 这是相对定位的一个主要容器元素。


• 两个伪元素这是大致的父元素宽度的一半。一个因素是偏向产生偏左侧，而另一种是不歪斜。


• 偏斜伪元件定位在左侧而正常元件定位在容器元件的右侧。


• 的倾斜伪元素只顶部，左侧和底部边框。右边界被省略，因为它会在该形状的中间来的权利。对于不倾斜的伪元素，左边框避免出于同样的原因。


• 歪斜的伪元素的左边框比其他边界更厚一点，因为偏斜，使边界看起来更薄比它实际上是。

我还增加了一个悬停效果的片段展示形状的响应性。

\r

\r

.outer {\r
  位置：相对;\r
  高度：960x75像素;\r
  宽度：300像素;\r
  文本对齐：中心;\r
  行高：960x75像素;\r
  颜色：白色;\r
  文本转换：大写;\r
}\r
.outer：之前，\r
.outer：{后\r
  位置：绝对的;\r
  内容：'';\r
  顶：0像素;\r
  高度：100％;\r
  宽度：55％;\r
  背景：紫色;\r
  边界：2px的固体白色;\r
  左边框宽度的3px;\r
  的z-index：-1;\r
}\r
.outer：前{\r
  左：0像素;\r
  边界半径：20像素;\r
  右边框：无;\r
  变换：歪斜（20deg）;\r
  变换原点：左上角;\r
}\r
.outer：{后\r
  右：0像素;\r
  边框右上角半径：20像素;\r
  边框右下角半径：20像素;\r
  左边框：无;\r
}\r
\r
/ *只是为了响应大自然的演示* /\r
\r
。外{\r
  过渡：全1;\r
}\r
.outer：悬停{\r
  高度：100像素;\r
  宽度：400像素;\r
  行高：100像素;\r
}\r
身体{\r
  背景：lightblue;\r
}

\r

＆LT; D​​IV CLASS ='外'＆GT;\r
  给我回电话\r
＆LT; / DIV＆GT;

\r

\r

\r

优点：

• 这种方法的一大优点是，它提供了一个优美的回退。即，在非CSS3兼容浏览器它看起来像带圆角正常按钮（没有倾斜的侧面）。


• 页面（或容器元素）背景不必是纯色。


• 的形状本身可具有非固体的颜色（即，图像或梯度）作为背景。这将需要一些额外的调整，但这种方法本身将保持不变。

---

在下面的代码片段，我的给每个组件不同的颜色直观地说明如何形状来实现的：

\r

\r

.outer {\r
  位置：相对;\r
  高度：960x75像素;\r
  宽度：300像素;\r
  文本对齐：中心;\r
  行高：960x75像素;\r
  颜色：白色;\r
  文本转换：大写;\r
}\r
.outer：之前，\r
.outer：{后\r
  位置：绝对的;\r
  内容：'';\r
  顶：0像素;\r
  高度：100％;\r
  宽度：55％;\r
  背景：紫色;\r
  边界：2px的固体白色;\r
  左边框宽度的3px;\r
  的z-index：-1;\r
}\r
.outer：前{\r
  左：0像素;\r
  边界半径：20像素;\r
  右边框：无;\r
  变换：歪斜（20deg）;\r
  变换原点：左上角;\r
  背景：海藻绿;\r
  边框颜色：红色;\r
}\r
.outer：{后\r
  右：0像素;\r
  边框右上角半径：20像素;\r
  边框右下角半径：20像素;\r
  左边框：无;\r
  背景：黄绿色;\r
  边框颜色：栗色;\r
}\r
\r
/ *只是为了响应大自然的演示* /\r
\r
。外{\r
  过渡：全1;\r
}\r
.outer：悬停{\r
  高度：100像素;\r
  宽度：400像素;\r
  行高：100像素;\r
}\r
身体{\r
  背景：lightblue;\r
}

\r

＆LT; D​​IV CLASS ='外'＆GT;\r
  给我回电话\r
＆LT; / DIV＆GT;

\r

\r

\r

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>

解决方案

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 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>

这篇关于分度倾斜的侧面圆润边角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！