How to make a stylized edge?

Asked

Viewed 321 times

0

How to make a stylized border as image below? The big question is that on the left side has two border styles.

inserir a descrição da imagem aqui

css

  • The right and bottom edge is transparent?

  • I didn’t understand your question, but take a look here

  • @Magichat Is yes.

3 answers

5


If the only stylized edge so is left, you can work with the pseudo-elements :before and :after, styling both its edges and its body. See an example where I created the thinnest edge with the element before and the small grey segment with the element after:

.border {
  width: 300px;

  border-top: 3px solid #1E90FF;
  border-left: 3px solid #1E90FF;
  position: relative;
  background: white;
  
  padding: 20px;
  font-family: monospace
}

.border:before {
  content: " ";
  position: absolute;
  width: 2px;
  height: calc(100% - 80px);
  left: -3px;
  bottom: 0;
  border-left: 1px solid #CCCCCC;
  background: white;
}

.border:after {
  content: " ";
  position: absolute;
  width: 2px;
  height: 30px;
  left: -2px;
  top: 100px;
  background: #CCCCCC;
}
<div class="border">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare, mi posuere suscipit malesuada, est ante tempor augue, quis porttitor lectus mauris ac diam. Morbi sed tortor justo. Etiam maximus orci magna, quis tristique dolor tempor id.
</div>

  • Nice solution, expensive in terms of code, but nice and if applied in several elements, should be lighter than the image...

  • @Magichat and using the calc CSS 3 is very dynamic and responsive. I can’t remember if it’s possible without distorting it. You know how to say?

  • Well, I have yet to test it, but I think if you put the figures in percentage, "I think" you will...[

1

Use the attribute border-image.

<p id="borderimg">Utilize o atributo <strong>border-image</strong></p>
<style> 
#borderimg
{ width:300px;
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://i.stack.imgur.com/vnBXc.jpg") 27;
}
</style>

Check the compatibility between browsers.

-1

You can do something like the example below:

.border-on-top {
  border-top:1px solid black;
  position: relative;
}
 
.half-a-border-on-left {
  border-left: 1px solid black;
  position: relative;
  height: 50px;
}
.half-a-border-on-left:after {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left:-1px;
  top: -10px;
}
.half-a-border-on-left:before {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 50%;
  background-color:blue;
  position: absolute;
  left: -1px;
  bottom: -5px;
}
<div class="half-a-border-on-left border-on-top">Hello world!</div>

https://stackoverflow.com/questions/8804417/css-border-where-only-half-of-a-border-is-visible

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.