javascript - CSS绘制两个相连的多边形

问题描述

问 题

有这样一段HTML：

<span>Repo</span><span>Branch</span>

想要用css绘制出下图的效果：

应该如何写这段CSS？

解决方案

https://jsfiddle.net/hsfzxjy/...

span {
  display: inline-block;
  padding: .5em 1.5em;
  margin-left: 1em;
  position: relative;
  color: white;
  height: 2em;
  box-sizing: border-box;
}

span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  border-left: 1em solid transparent;
  border-top: 1em solid;
  border-top-color: inherit;
  border-bottom: 1em solid;
  border-bottom-color: inherit;
  left: -1em;
  top: 0;
  height: 100%;
  width: 1em;
}

span::after {
  box-sizing: border-box;
  position: absolute;
  content: "";
  border-left: 1em solid;
  border-left-color: inherit;
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  right: -1em;
  top: 0;
  height: 100%;
  width: 1em;
}

#repo {
  background-color: #3ABF28;
  border-color: #3ABF28;
}

#branch {
  background-color: #90E131;
  border-color: #90E131;
}

这篇关于javascript - CSS绘制两个相连的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！