如何用纯CSS实现告警弹窗的45度交替颜色顶部边框

我希望不引入图片，仅通过CSS实现告警弹窗效果。图1是预期效果，图2是当前已实现的效果，目前卡在顶部45度交替颜色边框的实现上，无法完成角度旋转。

以下是我当前的代码：

<style>
.alert {
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 30px;
  margin-top: 250px;
  margin-left: 350px;
  margin-right: 350px;
  
  border-radius: 5px;
  font-family: sans-serif;
  font-weight: 400;
  background-color: #EEE;
  border: 3px solid black;
  box-shadow: 5px 15px 15px 15px silver;
}

.button {
 
  padding: 5px 8px 5px 20px;
 
  line-height: 1.2;
  border-radius: 1px;
  font-family: sans-serif;
  font-weight: 400;
  background-color: white;
  border: 1px solid black;
  color: black;
  text-decoration: none;
 
}

.boxborder-me {
  box-shadow: 0 0 0 5px yellow;
  outline: dashed 5px brown;
  height: 100px;
}

.alert h3 {
 text-align: left;
 font-size: 16px;
 }
.checkmark {
      display: inline-block;
      font-weight: bold;
      color: green;
      padding-right: 5px;
    }
    
.warning {
      display: inline-block;
      font-weight: bold;
      color: orange;
      font-size: 48px;
      padding-right: 5px;
    }
   
.warn,
.warn::before,
.warn::after
{
  position: relative;
  padding: 0;
  margin: 0;
}

.warn {
  font-size: 36px;
  color: transparent;
}

.warn.warning {
  display: inline-block;

  top: 0.225em;

  width: 1.15em;
  height: 1.15em;
  
  overflow: hidden;
  border: none;
  background-color: transparent;
  border-radius: 0.425em;
}

.warn.warning::before {
  content: "";
  display: block;
  top: -0.08em;
  left: 0.0em;
  position: absolute;
  border: transparent 0.6em solid;
  border-bottom-color: #F5B041;
  border-bottom-width: 1em;
  border-top-width: 0;
  
}

.warn.warning::after {
  display: block;
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 100%;
  padding: 0 1px;
  text-align: center;
  font-family: "Garamond";
  content: "!";
  font-size: 0.65em;
  font-weight: bold;
  color: white;
}

.child {
  border: 1px solid blue;
  padding: 0px 0px 0px 0;
  valign: top;
}

.alert-message {
  padding: 0px 0px 10px 0;
}
.alert {
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 30px;

}
        
        .topborder{
  box-shadow: 0 0 0 7px yellow;
  outline: dashed 6px brown;  
  padding: 0px;
}

</style>

<body style="background-color: #EEE">
        <div class="alert">
            <div>
                <div class="topborder"/>
            </div>
            <table valign="top">
                <tr>
                    <td style="padding: 0 10px 0 0px">
                        <div>
                            <span class="warn warning"/>
                        </div>
                    </td>
                    <td>
                        <div>
                            <h3>Alert</h3>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 0 7px 0 0px"/>
                    <td>
                        <div class="alert-message">
                            <span>Please input details to proceed.</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 0 7px 0 0px"/>
                    <td>
                        <div style="text-align:right">
                            <label>
                                <a class="button" href="goBack">
                                    <span class="checkmark">&#10003;</span>
                            OK</a>
                            </label>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>

解决方案：实现顶部45度交替色边框 #

可以利用CSS的linear-gradient结合背景网格设置来实现该效果，无需额外旋转操作，直接通过伪元素实现顶部边框层：

修改.alert样式，移除原有的topborder元素，改用伪元素实现：

.alert {
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 30px;
  margin-top: 250px;
  margin-left: 350px;
  margin-right: 350px;
  
  border-radius: 5px;
  font-family: sans-serif;
  font-weight: 400;
  background-color: #EEE;
  border: 3px solid black;
  box-shadow: 5px 15px 15px 15px silver;
  /* 预留顶部边框空间 */
  padding-top: 40px;
}

/* 顶部45度交替边框伪元素 */
.alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  /* 线性渐变实现45度交替色块 */
  background: linear-gradient(45deg, #ff0 12.5%, #8B4513 12.5%, #8B4513 25%, #ff0 25%, #ff0 37.5%, #8B4513 37.5%, #8B4513 50%, #ff0 50%, #ff0 62.5%, #8B4513 62.5%, #8B4513 75%, #ff0 75%, #ff0 87.5%, #8B4513 87.5%, #8B4513);
  /* 45度网格尺寸计算：高度 × √2 */
  background-size: 28.28px 28.28px;
  border-bottom: 3px solid black;
  border-radius: 5px 5px 0 0;
}

最后删除HTML中的<div><div class="topborder"/></div>代码块，即可实现预期的顶部45度交替颜色边框效果。

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