我的项目的UI设计中有这样的款式，一开始用的背景图，简略粗犷，起初在其余中央出了问题，因为是背景图的起因，这个框框被拉长了后小方块的宽度也变宽了，而后想用纯css实现，百度竟然没查到相似的东东，起初在umi的交换群里有个牛人给我指导了下 css backgrund: linear-gradient突变属性能够实现，因为它能够设置突变从哪开始，这就能够让咱们实现4个顶点的地位定位咯，上代码：
html
<div className={`fw-titleBar ${className}`} style={style}> <div className="fw-titleBar-content"> {children} </div></div>css
.fw-titleBar { width: 100%; display: inline-block; position: relative; background: linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top, linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right top, linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left bottom, linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right bottom; background-size:8px 8px,8px 8px,8px 8px,8px 8px; padding: 8px 0; &::before{ content: ''; width: calc(100% - 30px); height: calc(100% - 30px); background-color: #00BDFF4D; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .fw-titleBar-content{ width: 100%; height: 100%; display: inline-flex; position: relative; justify-content: space-between; align-items: center; border-top: 1px solid #00BDFF4D; border-bottom: 1px solid #00BDFF4D; padding: 10px 25px; }}当然你也能够在
linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top 30px
像这样来设置地位