Display three colors in a single DIV Element with Text-CodePudding

How can I display this CSS icon using only a single DIV? I thought of a linear gradient as background, but I couldn't realize it myself until now.

Here you can see that it should work theoretically (of course with different colors). How to color a single div with 3 different colors? (one third blue, one third white, one third red)

The first snippet shows how it should look, the second snippet is a very bad trial from me and somehow it does not turn out as it should even the hover effect fails... does anyone can get the whole thing right to work?

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: gray;
}

.whitepaper {
  cursor: pointer;
  text-align: center;
  background-color: white;
  border: 2px solid black;
  border-radius: 3px;
  float: left;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

.blackframe {
  text-align: center;
  background-color: black;
  cursor: pointer;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 12px 0 12px 0;
  color: white;
  width: 30px;
}

.whitepaper:hover {
  cursor: pointer;
  text-align: center;
  background-color: black;
  border: 2px solid white;
  border-radius: 3px;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

<div >
  <div >URL</div>
</div>

<div >
  <div >URL</div>
</div>

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: gray;
}

.whitepaper {
  align-items: center;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to top, white 10px, black 1px, white);
  border: 2px solid black;
  border-radius: 3px;
  color: white;
  display: flex;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

.whitepaper:hover {
  cursor: pointer;
  text-align: center;
  background-color: black;
  border: 2px solid white;
  border-radius: 3px;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

<div >URL</div>

CodePudding user response：

The way linear-gradient works is that the colors and values you list are stops, and CSS automatically fills in the space in between and blends it in a gradient. As mentioned in the linked question, the way to get sharp, instant transitions between colors is to create two stops at the same location: one with the old color, and one with the new. That way, there is no "in-between" space to fill with a gradient. You basically just list the starting and ending points for each color as stops, which is what I did here.

The reason your background colors weren't getting overridden on :hover is that you used background-color under the :hover selector, which doesn't override a linear-gradient. If you switch it to background, as I did, it works fine. I believe this sample works identically to the example you gave. You can adjust the px values in the linear-gradient if I didn't get them perfect.

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: gray;
}

.whitepaper {
  align-items: center;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to top, white 12px, black 12px, black 28px, white 28px);
  border: 2px solid black;
  border-radius: 3px;
  color: white;
  display: flex;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

.whitepaper:hover {
  cursor: pointer;
  text-align: center;
  background: black;
  border: 2px solid white;
  border-radius: 3px;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

<div >URL</div>

CodePudding user response：

Made some small changes. Changed the linear gradient into something opaque and added background sizing.

You can adjust the black part's size with background-size.

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: gray;
}
.whitepaper {
  align-items: center;
  cursor: pointer;
  text-align: center;
  background-color: white;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 100) 50%, rgba(0, 0, 0, 100) 50%);
  background-size: 100% 50%;
  background-position-y: center;
  background-repeat: no-repeat;
  border: 2px solid black;
  border-radius: 3px;
  color: white;
  display: flex;
  justify-content: center;
  font-size:12px;
  font-weight:bold;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}
.whitepaper:hover {
  cursor: pointer;
  text-align: center;
  background-color: black;
  border: 2px solid white;
  border-radius: 3px;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

<div >URL</div>