css实现div内凹角样式的示例代码

要实现div内凹角的样式，可以通过在样式中设置边框颜色、边框宽度及边框样式，然后用伪元素（:before,:after）做一个覆盖边框的三角形，最后用上z-index和背景颜色或者背景图来完成效果。下面是详细的攻略步骤和示例代码：

步骤一：设置基础样式

首先，在HTML中添加一个div元素，并为其设置样式，包括宽度、高度、背景色、边距和边框等。示例代码如下：

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

.box {
  width: 200px;
  height: 200px;
  margin:50px auto;
  background: #fff;
  border:2px solid #ddd;
}

步骤二：添加伪元素

接着，在CSS中定义伪元素（:before,:after），并设置其样式，用来做三角形的遮盖。同时，为伪元素设置样式之前，可以先给三角形设置一下默认值，如下所示：

• 首先，在伪元素的样式中，设置border-width宽度为0，以便于构造三角形时使用到这个值，同时把border-color颜色值设为透明色。
• 接着，设置伪元素的位置position为absolute，并将z-index层级设为-1，这样，三角形遮挡内容区域不会影响正常的布局。
• 然后，根据需求设置triangle伪元素的宽度、高度、边框以及位置等样式，构建出一个通过border-width来实现的三角形。

示例代码如下：

.box:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #fff;
  left: -20px;
  top: 40px;
  z-index: -1;
}
.box:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #fff;
  right: -20px;
  top: 40px;
  z-index: -1;
}

在示例代码中，我们通过:before和:after伪元素来创建两个三角形，位置分别在div元素的左侧和右侧。

步骤三：优化配色

最后，在伪元素中添加背景色覆盖，去掉边框线，使之形成全覆盖的三角形，以突出其凸出效果。示例代码如下：

.box:before,
.box:after {
  background: #fff;
  border: 10px solid transparent;
  border-top: none;
  border-bottom: none;
}

完整的示例代码如下：

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

.box {
  width: 200px;
  height: 200px;
  margin:50px auto;
  background: #fff;
  border:2px solid #ddd;
  position: relative;
}

.box:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #fff;
  left: -20px;
  top: 40px;
  z-index: -1;
  background: #fff;
  border: 10px solid transparent;
  border-top: none;
  border-bottom: none;
}
.box:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #fff;
  right: -20px;
  top: 40px;
  z-index: -1;
  background: #fff;
  border: 10px solid transparent;
  border-top: none;
  border-bottom: none;
}

通过以上三个步骤，就可以实现div内凹角的样式。当然，也可以根据需求来调整三角形的大小、位置和颜色等属性，实现更多的样式效果。

另外，上述示例中的三角形是使用border-width来构造的，也可以使用SVG或其他方式来实现。下面是另一种示例，使用SVG来实现内凹角的样式：

<div class="box-svg"></div>

.box-svg {
  width: 200px;
  height: 200px;
  margin:50px auto;
  background: #fff;
  border:2px solid #ddd;
  position: relative;
}

.box-svg:before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
  left: -10px;
  top: 40px;
  z-index: -1;
}
.box-svg:after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(-45deg);
  right: -10px;
  top: 40px;
  z-index: -1;
}

在上述示例中，使用SVG来实现三角形，通过设置旋转、大小、位置和颜色等属性来实现内凹角的样式。