CODEWITHSUNDEEP
cssshapescss-shapes
Lara M.
Lara M.

Reputation: 855

Add a border to a linear-gradient shape

I need to make triangle with a black border in the background, I am using linear-gradient to get the triangle, but I can't find out if it is possible to add a border.

This is what I get: enter image description here

And this is what I need: enter image description here

The code:

#intro{
  display: block;
  background: 
  linear-gradient(to bottom left,transparent 50%,#DFC7A9 0) bottom left/100% 40% no-repeat,
  transparent; 
}

Upvotes: 1

Views: 199

Answers (3)

blazej
blazej

Reputation: 961

This solution doesn't use linear-gradient but it kind of works. I don't know if it is a good answer, but looks as it should look.

.base {
    width: 500px;
    height: 100px;
    overflow: hidden;
}
.base div {
    background-color: #DFC7A9;
    transform: rotate(7deg) translate(-10%, 75%);
    width: 120%;
    height: 100%;
    border-top: 2px solid #000;
}
<div class="base">
    <div></div>
</div>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105863

You may also use a filter : drop-shadow().

possible example:

body {
  margin: 0;
  padding: 0;
}

#intro {
  display: block;
  background:linear-gradient(to bottom left,transparent 50%,#DFC7A9 50.35%) bottom left/100% 40% no-repeat,
  transparent; 
  min-height: 100vh;
  filter:drop-shadow(0 -3px);
}
<div id="intro"></div>

Upvotes: 2

Terry
Terry

Reputation: 66103

You just need to add two additional color stops in between. For example, if you want the border to have 2% of the size, then you can change the color stops to:

transparent 49%, black 49%, black 51%, #DFC7A9 51%

See example below:

body {
  margin: 0;
  padding: 0;
}

#intro {
  display: block;
  background: linear-gradient(to bottom left, transparent 49%, black 49%, black 51%, #DFC7A9 51%) bottom left / 100% 40% no-repeat, transparent;
  width: 100%;
  height: 100vh;
}
<div id="intro"></div>

Upvotes: 2

Related Questions