css制作箭头矩形

使用 CSS 边框和伪元素制作箭头矩形

通过 CSS 的边框属性和伪元素可以轻松实现箭头矩形效果。以下是一个常见的实现方法：

.arrow-box {
  position: relative;
  width: 200px;
  height: 100px;
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  margin: 50px;
}

.arrow-box:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #3498db;
}

使用 CSS 变换制作箭头矩形

另一种方法是使用 CSS 的 transform 属性来旋转一个正方形，形成箭头效果：

.arrow-box {
  width: 200px;
  height: 100px;
  background: #3498db;
  position: relative;
  margin: 50px;
}

.arrow-box:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: #3498db;
  transform: translateY(-50%) rotate(45deg);
}

使用 SVG 作为背景制作箭头矩形

对于更复杂的箭头形状，可以使用 SVG 作为背景：

.arrow-box {
  width: 200px;
  height: 100px;
  background: #3498db;
  position: relative;
  margin: 50px;
}

.arrow-box:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 20px;
  height: 40px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"><polygon points="0,0 20,20 0,40" fill="%233498db"/></svg>');
  transform: translateY(-50%);
}

使用 clip-path 制作箭头矩形

CSS 的 clip-path 属性可以创建任意形状的容器：

.arrow-box {
  width: 200px;
  height: 100px;
  background: #3498db;
  position: relative;
  margin: 50px;
  clip-path: polygon(
    0% 0%,
    90% 0%,
    100% 50%,
    90% 100%,
    0% 100%
  );
}

响应式箭头矩形

为了使箭头矩形在不同屏幕尺寸下都能正常显示，可以添加响应式设计：

.arrow-box {
  width: 80%;
  max-width: 300px;
  height: 0;
  padding-bottom: 50%;
  background: #3498db;
  position: relative;
  margin: 5%;
}

.arrow-box:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 5%;
  height: 10%;
  background: #3498db;
  transform: translateY(-50%) rotate(45deg);
}

每种方法都有其优缺点，边框方法简单但形状有限，SVG 方法灵活但需要更多代码，clip-path 方法现代但浏览器支持需要考虑。根据项目需求选择最适合的实现方式。