如何使用CSS或SVG实现矩形内部包含红色菱形的效果？

下面提供两种完全不需要引入图片的实现方式，都可以达成你要的效果：

方案1：纯CSS实现（基于现有代码改造） #

不需要新增DOM节点，直接在你现有.rectangle的CSS基础上追加伪元素样式即可：

/* 你原有代码保留 */
.rectangle {
  width: 98px;
  height: 45px;
  border: 1px solid white;
  display: inline-block;
  position: relative;
  border-bottom: 2px solid white;
  /* 可选：如果怕菱形超出矩形可以加 overflow: hidden; */
}

/* 新增伪元素生成红色菱形 */
.rectangle::after {
  content: '';
  position: absolute;
  /* 可自行调整left数值修改菱形的水平位置 */
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  /* 可修改宽高调整菱形大小 */
  width: 16px;
  height: 16px;
  background: #ff0000;
}

原理是把正方形伪元素旋转45度得到菱形，通过定位调整到矩形内的目标位置即可。

方案2：SVG实现 #

如果需要更好的矢量缩放效果、或者要把效果作为整体复用，可以用SVG实现，代码如下：

<svg width="98" height="45" viewBox="0 0 98 45" xmlns="http://www.w3.org/2000/svg">
  <!-- 白色边框矩形 -->
  <rect x="0.5" y="0.5" width="97" height="44" stroke="#fff" stroke-width="1" fill="none" />
  <line x1="0" y1="44" x2="98" y2="44" stroke="#fff" stroke-width="2" />
  <!-- 红色菱形，调整points属性的坐标可修改菱形位置和大小 -->
  <polygon points="23,22.5 31,14.5 39,22.5 31,30.5" fill="#ff0000" />
</svg>

你可以直接把这段SVG代码插入到HTML中使用，也可以转成data URI嵌入CSS作为背景图使用。

内容的提问来源于stack exchange，提问作者Oblivion