How to use a border image (or character) via CSS?

Navigation
2

I have a tag with text inside that I would like to use the% c key as the border for this text.

Code: 

.indicacoes {
font-family: 'AmaticBold';
font-size: 40px;
margin-top: 30px;
text-align: center; }
<div class="container">
        <div class="texto-principal">
            <p id="borderimg" class="indicacoes">texto de teste! <br>
                TEXTO TEXTO TEXTO TEXTO. <br>
                TEXTO TEXTO TEXTO.</p>
        </div>
</div>

The goal is to stay as in the attached image:

    
asked by anonymous 23.11.2018 / 05:56

2 answers

0

I made a template using pseudo-element myself, so I can better control the contour and curvatures. I know it was not exactly the same, but sometimes it catches you ...

I did not have to touch anything in your HTML, just in the box where the text is inside I create a ::before and ::after These% keys [ ] will always have the content height, so it does not matter if it has too much or too little text, the "keys" will always fit the content.

The trick here was to construct a rectangle on each side of the text box and remove the edge from inside that square, to make the corners rounded, just use border-radius . But as I said at the beginning does not look exactly the same as the image 

.indicacoes {
    font-family: 'AmaticBold';
    font-size: 40px;
    margin-top: 30px;
    text-align: center; 
}
.texto-principal {
    padding: 1rem;
    width: 50%;
    margin: 1rem auto;
    position: relative;
}
.texto-principal::after,
.texto-principal::before {
    content: "";
    position: absolute;
    top: 0;
    width: 4em;
    height: 100%;
    border: .5em solid currentColor;
    border-radius: .5em;
}
.texto-principal::after {
    left: 0;
    border-right: 0;
}
.texto-principal::before {
    right: 0;
    border-left: 0;
}
<div class="container">
    <div class="texto-principal">
        <p id="borderimg" class="indicacoes">
            texto de teste! <br>
            TEXTO TEXTO TEXTO TEXTO. <br>
            TEXTO TEXTO TEXTO.
        </p>
    </div>
</div>
    
23.11.2018 / 18:57
0

As says this answer from SO you can draw the keys without the use of any pseudo element in pure CSS.

Steps:

  • Create an element as <div or span and use inline-block to make the size dependent on content;
  • Apply the borders on the right and left;
  • Use linear-gradient() to create 4 background images with specific height and width and draw each corner of the box with background-position . The height property of background-size must be equal to the thickness of the left border. 

div.chaves {
  background-image: linear-gradient(#000000, #000000),
                    linear-gradient(#000000, #000000),
                    linear-gradient(#000000, #000000),
                    linear-gradient(#000000, #000000);
  border: solid #000000;

  background-repeat: no-repeat;
  /* O segundo valor deve ser igual à largura das bordas */
  background-size: 8px 4px;
  border-width: 0 4px;
  background-position: top left, top right, bottom left, bottom right;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div style="display: flex; justify-content: center; padding-top: 50px;">
  <div style="width: 40%;">
    <div class="chaves">
      <p id="borderimg" class="indicacoes">
        texto de teste! <br> TEXTO TEXTO TEXTO TEXTO. <br> TEXTO TEXTO TEXTO.
      </p>
    </div>
  </div>
</div>
    
23.11.2018 / 12:55
Enable / Disable input when clicking on a checkbox [closed] .NET Core + Visual Studio Code - Structure organization