Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><img src="https://i.stack.imgur.com/TXAwD.png" alt="enter image description here"> </p> <p>with a single element you could do this i have to go to work hope this help </p> <pre><code>&lt;div&gt;Lorem Ipsum&lt;/div&gt; </code></pre> <p>the style:</p> <pre><code> div{ width:200px; height:60px; margin:100px; background-color:transparent; color:black; position:relative; text-indent:30px; line-height:60px; box-shadow:inset 20px 0 0 200px white; overflow:hidden; -webkit-box-shadow: inset -164px 0 0 20px white; -moz-box-shadow: inset -164px 0 0 20px white; box-shadow: inset -164px 0 0 20px white; } div:before{ content: ''; position: absolute; left: 0px; top: 4px; width: 14px; border-bottom: 3px solid blue; border-left: 3px solid blue; height: 18px; background-color:white; -webkit-transform: skew(0deg,34deg); -moz-transform: skew(0deg,34deg); transform: skew(0deg,34deg); } div:after{ content: ''; position: absolute; background-color:white; left: 0px; bottom: 4px; width: 14px; border-top: 3px solid blue; border-left: 3px solid blue; height: 18px; -webkit-transform: skew(0deg,-34deg); -moz-transform: skew(0deg,-34deg); transform: skew(0deg,-34deg); } body{ background-color: #EEEEEE; khtml-background-size: 10px 10px; -webkit-background-size: 10px 10px; -moz-background-size: 10px 10px; -ms-background-size: 10px 10px; -o-background-size: 10px 10px; background-size: 10px 10px; background-image: -khtml-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); width:100%; height:100%; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload