如何在css中执行以下提到的形状

Question

我需要一个形状怪异的div，并且我已经在网上阅读了有关div形状的信息，但是我没有找到我需要的：

请注意：它不能只是边框，因为里面应该有文字。

Answer 1

您可以使用skewX()和伪元素来使形状响应 ：

演示

HTML：

<div>TEST</div>

CSS：

div{
    line-height:50px;
    color:#fff;
    text-align:center;
    background:#344769;
    width:20%;
    position:relative;
}
div:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    background:#344769;
    z-index:-1;

    -ms-transform-origin: 0 100%;
-webkit-transform-origin:0 100%;
transform-origin:  0 100% ;

    -ms-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
transform:  skewX(-30deg) ;
}

Answer 2

如果您想拥有真正自定义的形状，可以尝试使用SVG形状 。 它允许您绘制多边形，并用于例如在某些网站上显示地图。

至于您在编辑答案后添加的插图，您可能希望通过将形状分成带有文本和右侧的三角形的矩形来简单地玩三角形 。

示例（另请参见JsFiddle ）：

HTML：

<div class="shape">
    <span class="text">Test</span>
    <span class="triangle"></span>
</div>

CSS：

.shape {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}

.text {
    background: navy;
    color: white;
    float: left;
    padding-left: 20px;
    text-align: center;
    width: 150px;
}

.triangle {
    float: left;
    height: 0;
    width: 0;
    margin-top: -40px;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid navy;
}

Answer 3

您可以使用linear-gradient实现此效果。

先看一下DEMO 。

div{
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 2em;
  color:#ffffff;
  background: linear-gradient(-250deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
  text-align:center;
}

Answer 4

您可以在CSS中使用：after伪元素来实现此目的。

我创建了一个jsFiddle来演示这一点： http : //jsfiddle.net/49BRA/

CSS：

div {
    display: block;
    width: 200px;
    height: 50px;
    background-color: #CCC;
    margin: 0;
    padding: 0;
    line-height: 1em;
    position: relative;

    font-size: 2em;
    line-height: 50px;
    text-align: center;
}

div:after {
    display: inline-block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #CCC;
    border-bottom: 25px solid transparent;
    border-right: 25px solid transparent;
    position: absolute;
    right: -50px;
}

HTML：

<div>TEST</div>

希望这对您有用。

干杯!

Answer 5

请使用以下代码获取所需的形状：

<span style="display: inline-block; width: 20em; height: 20em">
  <span style="position: relative; display: inline-block; width: 20em; height: 20em">
    <i style="position: absolute;display:inline-block;width:14.6em;height:5.4em;background-color:#007BFF;left:0em;top:0em"></i>
    <i style="position: absolute;display:inline-block;width:0;height:0;line-height:0;border:2.7em solid transparent;border-left:2.7em solid #007BFF;border-top:2.7em solid #007BFF;left:14.6em;top:0em"></i>
  </span>
</span>