如何在css中转换块？

Question

如何在CSS中转换块？需要或不需要伪元素？我尝试在下图中创建块看起来像块。我无法创建如下图所示的块。

这是我的代码：

＆＃13;

＆＃13;

.transform_items {
  width: 40%;
  height: 80px;
  position: relative;
  margin: 0 auto;
  perspective: 600px;
  margin-top: 150px;
  left: 50px;
}
.block,
.block::before{
  display: block;
  position: absolute;
  margin: 0 auto;
}
.block {
  border: 5px solid transparent;
  width: 350px;
  height: 60px;
}
.block::before {
  content: '';
  border: 5px solid #52B352;
  transform: rotateY(30deg);
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -35px;
}
.block a {
  font-size: 24px;
}

＆＃13;

<div class="transform_items">
  <div class="block"><a>Block</a></div>
</div>

＆＃13;

＆＃13;

＆＃13;

预期结果：

Answer 1

如果你可以使用SVG ^（1） ，它可能是这样的

codePen

 ParserRegistry parserRegistry = restClient.getParser()     
 parserRegistry.putAt(groovyx.net.http.ContentType.JSON,{HttpResponseDecorator resp ->
        def obj = null
        if (resp.status ==200){
            if(clazz != null){
                String jsonString = IOUtils.toString(resp.getEntity().getContent(), "UTF-8");
                obj = new ObjectMapper().readValue(jsonString,new TypeReference<MyObject>(){});
            }
            return obj
        }else{
            throw new Exception("No found")
        }
    })

svg #block {
  stroke: orange;
  fill: none;
  stroke-width: 5
}
svg text {
  font-size: 25px
}

您还可以将svg代码保存为<svg version="1.1" x="0px" y="0px" width="274px" height="84px" viewBox="0 0 274 84"> <polygon id="block" points="33,13 245,24 245,60 29,64 " /> <text x="100" y="50">BLOCK</text> </svg>文件，将保存为文本元素，并将其用作包含文本的div的.svg

阅读本文以了解如何以不同方式使用svg：https://css-tricks.com/using-svg/

^（1） _{SVG的浏览器支持比background-image，caniuse: SVG} 的浏览器支持要好一点