Html Div 上的倾斜边框

Skewed Borders on a Div

提问by Michelle

I'm trying to skew a div, similar to this: Slant the top of a div using css without skewing textor this: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

我正在尝试倾斜一个 div，类似于： 使用 css 倾斜 div 的顶部而不倾斜文本或这个：http: //tympanus.net/codrops/2011/12/21/slopy-elements-with-css3 /

Here's an image of what I'm trying to do:

这是我正在尝试做的事情的图像：

Basically, I need to slant the borders in weird ways on all 4 sides. I can do this with background images, but I'd prefer some way to do this in CSS so the divs can be responsive in width and height. I'd like to find a solution that works on older browsers, but I understand I can't have everything!

基本上，我需要在所有 4 个边上以奇怪的方式倾斜边界。我可以用背景图片来做到这一点，但我更喜欢在 CSS 中用某种方式来做到这一点，这样 div 就可以在宽度和高度上做出响应。我想找到一个适用于旧浏览器的解决方案，但我知道我不能拥有一切！

What would be the best way to have slanted borders on all 4 sides? (Note: the border on the bottom of the green box slants up in the middle, and down on the outside, and I do NOT need the borders to do this. just a slant in one direction is good.)

在所有 4 边都有倾斜边界的最佳方法是什么？（注意：绿色框底部的边框在中间向上倾斜，在外侧向下倾斜，我不需要边框来做到这一点。向一个方向倾斜就可以了。）

回答by Josh Crozier

I was able to make something very similar.. it works in all modern browsers.

我能够做出非常相似的东西……它适用于所有现代浏览器。

HTML- Pretty simple

HTML- 非常简单

div:nth-child(1) {
  background: rgb(122, 206, 122);
  height: 140px;
  transform: skew(-10deg) rotate(2deg);
  -webkit-transform: skew(-10deg) rotate(2deg);
  -moz-transform: skew(-10deg) rotate(2deg);
}

div:nth-child(1) p {
  transform: skew(10deg) rotate(-2deg);
  -webkit-transform: skew(10deg) rotate(-2deg);
  -moz-transform: skew(10deg) rotate(-2deg);
  padding: 3% 2%;
}

div:nth-child(2) {
  border-bottom: 180px solid rgb(233, 233, 65);
  border-left: 8px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  margin-top: 60px;
  transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
}

div:nth-child(2) p {
  transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  padding: 3.5% 3%;
}

div:nth-child(3) {
  border-top: 140px solid rgb(253, 74, 74);
  border-left: 23px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  margin-top: 20px;
  transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
}

div:nth-child(3) p {
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  position: absolute;
  top: -140px;
  padding: 3% 3%;
}

div:nth-child(3):before {
  content: '';
  width: 124%;
  height: 80px;
  background: white;
  position: absolute;
  left: -20%;
  bottom: 120px;
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
}

<div>
  <p>text..</p>
</div>

<div>
  <p>text..</p>
</div>

<div>
  <p>text..</p>
</div>

Full Screen Demo---- jsFiddle demo

全屏演示----jsFiddle演示

回答by Daniel Priest

Also you can use "clip-path" and set any shape you needed. P.S. JS is only for transforming every 2 seconds.

您也可以使用“剪辑路径”并设置您需要的任何形状。PS JS 仅用于每 2 秒转换一次。

var wrapper = document.querySelector(".wrapper");
var textBlock = document.querySelector(".text-block");

function gRI(max) { // getRandomInt
  return Math.floor(Math.random() * Math.floor(max));
}

setInterval(function(){

 // new color
  
  let newColor = "rgb(" + gRI(255) + "," + gRI(255) + "," + gRI(255) +")";
 
 wrapper.style["background-color"] = newColor;
  
  // new shape
  
  let newShape = 
  "polygon(" +
  gRI(40) + "px " + gRI(40) + "px, " + // top left
 gRI(40) + "px " + "calc(100% - " + gRI(40) + "px), " +  // top right
  "calc(100% - " + gRI(40) + "px) " + "calc(100% - " + gRI(40) + "px), " +
  "calc(100% - " + gRI(40) + "px) " + gRI(40) + "px " +
  ")";
  
  textBlock.innerHTML = "clip-path: " + newShape +
             " <br><br> background-color: " + newColor;
  
  wrapper.style["clip-path"] = newShape;
}, 2000)

.wrapper{
  box-sizing: border-box;

  width: 90%;
  min-width: 200px;
  
  margin: 25px auto;
  padding: 50px;
  
  background-color: lightgray;
  
  transition: 0.5s;
  
  clip-path: polygon( 25px 25px, 25px calc(100% - 25px), calc(100% - 25px) calc(100% - 25px), calc(100% - 25px) 25px );
}

.text-block{
  width: 100%;
}

<div class="wrapper">
  <div class="text-block">Changes every 2 seconds...</div>
</div>