PHP týden Letní akce
Pouze tento týden sleva až 80 % na kurzy PHP. Lze kombinovat s akcí Letní slevy na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!
Avatar
Adam Gajdečka:23. února 16:04

Ahoj, prosím o radu. Potřebuji v bootstrap 4 přidat takovou tu stuhu do rohu sloupce.

(https://codepen.io/anon/pen/NoQabb)

<h1>My header</h1>
<div class="row">

    <div style="background-color:gray;" class="col-md-4">

    <div class="corner-ribbon top-right sticky blue">Hello</div>
   <p>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nibh. Fusce consectetuer risus a nunc. Morbi scelerisque luctus velit. Donec iaculis gravida nulla. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Suspendisse nisl. Ne
      </p>

         <p>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nibh. Fusce consectetuer risus a nunc. Morbi scelerisque luctus velit. Donec iaculis gravida nulla. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Suspendisse nisl. Ne
      </p>

         <p>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nibh. Fusce consectetuer risus a nunc. Morbi scelerisque luctus velit. Donec iaculis gravida nulla. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Suspendisse nisl. Ne
      </p>

         <p>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nibh. Fusce consectetuer risus a nunc. Morbi scelerisque luctus velit. Donec iaculis gravida nulla. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Suspendisse nisl. Ne
      </p>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');




/* The ribbons */

.corner-ribbon{
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Custom styles */


.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.top-left{
  top: 25px;
  left: -50px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
  top: 25px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
  top: auto;
  bottom: 25px;
  left: -50px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
  top: auto;
  right: -50px;
  bottom: 25px;
  left: auto;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Colors */

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}

Chci docílit: Potřebuji, aby ta stuha končila (nebyla viditelná) za tím šedým sloupcem.

Díky moc za rady.

 
Odpovědět 23. února 16:04
Avatar
Odpovídá na Adam Gajdečka
Uživatel sítě :23. února 17:22

Ahoj,

co třeba z toho udělat čtyřúhelník?

Je to to, co jsi chtěl?

https://ctrlv.cz/…/23/hJF2.png

Nahoru Odpovědět 23. února 17:22
Chybami se člověk učí, běžte se učit jinam!
Avatar
Tomáš Novotný:23. února 17:23

jako že třeba pomocí z-index: -1; ? https://codepen.io/anon/pen/JxgOwb

Nahoru Odpovědět 23. února 17:23
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Avatar
gold604
Člen
Avatar
gold604:23. února 17:25

Stačí rodičovskému elementu nastaviť overflow: hidden; :)
https://codepen.io/anon/pen/yZmPGm

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 23. února 17:25
Avatar
Odpovídá na gold604
Adam Gajdečka:23. února 18:12

skvělé, díky.

 
Nahoru Odpovědět 23. února 18:12
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.