Question

我正在尝试制作一个边缘倾斜的div盒子，但我似乎无法管理它。

这就是我想要得到的：

具有彩色（非实心）背景。

当前CSS：

        .infotop {
            display: inline-block;
            min-width: 30%;
            min-height: 10%;
            max-width: 50%;
            margin: auto;
            background-color: rgba(0, 190, 190, 0.6);
            color: white;
            text-align: center;
            padding: 10px;
            padding-left: 30px;
            padding-right: 30px;
            box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2), 0 16px 60px 0 rgba(0, 0, 0, 0.19);
            text-shadow: 2px 2px 4px #000000;
        }

Answer 1

使用渐变创建此效果：

.box {
  display:inline-block;
  padding:5px 30px;
  font-size:25px;
  color:#fff;
  background:
   linear-gradient(blue,blue) center/calc(100% - 40px) 100% no-repeat,
   linear-gradient(to bottom left,blue 49%,transparent 50.5%) left/20px 100% no-repeat,
   linear-gradient(to bottom right,blue 49%,transparent 50.5%) right/20px 100% no-repeat;
}

body {
  background:pink;
}

<div class="box">
 some text
</div>

clip-path

的另一种方式

.box {
  display:inline-block;
  padding:5px 30px;
  font-size:25px;
  color:#fff;
  background:blue;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
}

body {
  background:pink;
}

<div class="box">
 some text
</div>

Answer 2

您也许可以使用此处显示的技术：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid

在上面链接的示例中，我对梯形div进行了180度旋转。这样可以得到正确的形状，但也可以将div的文本倒置。我无法再次将文本右侧翻转。请参阅以下评论：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid {
    border-bottom: 100px solid blue;  /* 100px is the height of the trapezoid */
    border-left: 25px solid transparent; /* change angle by changing pixel value here*/ 
    border-right: 25px solid transparent; /* change angle by changing pixel value here*/ 
    transform: rotate(180deg); /* flip the trapezoid div */
    height: 0;
    width: 125px; /*width of the base */
}
.divtext
{
    transform: rotate(180deg); /*this is not rotating the text for some reason*/
    color: white; /* color of the text*/
}
</style>
</head>
<body>

<h2>Trapezoid CSS</h2>
<div class="trapezoid "><span class="divtext">Hello!</span></div>

</body>
</html>

如何创建具有倾斜边缘的盒子？

2 个答案: