如何仅使用CSS创建附图指定格式的div元素

你可以通过以下两种纯CSS方案实现对角斜切的卡片样式，可根据兼容性需求选择：

方案1：clip-path实现（写法最简单，现代浏览器兼容性好） #

HTML结构 #

<div class="cut-card">卡片内容</div>

CSS代码 #

.cut-card {
  width: 300px;
  padding: 20px;
  background: #2d3748;
  color: #fff;
  /* 调整下方的12px即可修改斜切的大小 */
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

方案2：渐变实现（兼容旧版本浏览器，支持添加边框效果） #

基础无边框样式 #

.cut-card {
  width: 300px;
  padding: 20px;
  color: #fff;
  background:
    linear-gradient(135deg, transparent 12px, #2d3748 0) top left,
    linear-gradient(-45deg, transparent 12px, #2d3748 0) bottom right;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

带边框样式 #

.cut-card {
  width: 300px;
  padding: 20px;
  color: #2d3748;
  border: 2px solid #3182ce;
  border-top: none;
  border-bottom: none;
  background:
    /* 边框色渐变 */
    linear-gradient(135deg, transparent 12px, #3182ce 0, #3182ce calc(12px + 2px), #fff 0) top left,
    linear-gradient(-45deg, transparent 12px, #3182ce 0, #3182ce calc(12px + 2px), #fff 0) bottom right;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

所有代码中的斜切尺寸、颜色、宽高、内边距都可以根据你的实际需求自行调整。

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