小编hou*_*oul的帖子

div之前的CSS形状

我在div之前添加不规则形状有问题.

我需要像这张图片一样生效:

div之前的CSS形状

但我需要为整个内容div获得此效果.不仅是左边还是下边.我试图调整用边框制作的css箭头,但它没有给我正确的效果.

它是更好地使用边框与透明色和组合::before,::after伪元素或background-clip属性.

我的HTML结构

.wrapper::before {
  display: block;
  height: 0px;
  width: 0px;
  border-left: 5px solid transparent;
  border-right: 650px solid transparent;
  border-bottom: 50px solid black;
}
.content {
  background-color: #f2f2f2;
  box-sizing: border-box;
  color: #000;
  text-transform: uppercase;
}

Run Code Online (Sandbox Code Playgroud)

<div class="wrapper">
  <div class="content">
    Content
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

有没有办法结合 ::after和::before伪元素将这种效果添加到整个div？

html css

hou*_*oul

2016 06-01

4
推荐指数

1
解决办法

719
查看次数

标签统计

css ×1

html ×1

div之前的CSS形状

标签 统计

小编hou_oul的帖子

标签统计