如何在css中做下面提到的形状

Question

我需要一个奇怪的形状div我已经在网上阅读塑造div，但我还没找到我需要的东西：

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

Answer 1

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

<强> DEMO

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 shapes进行更好的尝试。它允许您绘制多边形，例如，用于在某些网站上显示地图。

至于您在编辑答案后添加的插图，您可能只想使用triangles进行游戏，将形状分为带有文字的矩形和右边的三角形。

示例（另见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>