css - box shadow for simulating top border -
trying simulate top border doesn't start @ left edge of element.
.border-top { height: 50px; width: 100px; box-shadow: 15px -1px 0 0 black; } the above css close, produces black 15px wide shadow right of div. how contain that?
top border box shadow?
.border-top { height: 50px; width: 100px; box-shadow: 0px -10px 0px 0px red; margin-top: 25px; background: lightblue; } <div class="border-top"></div> alternatively, can use pseudo-element , calc (if border isn't going full width - it's not clear question).
.border-top { height: 50px; width: 100px; background: lightblue; position: relative; margin-top: 25px; } .border-top::after { content: ''; position: absolute; height: 5px; bottom: 100%; left: 15px; width: calc(100% - 15px); background: red; } <div class="border-top"></div>
Comments
Post a Comment