Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
discount 30 + hiring
Avatar
Adam Gajdečka:23.2.2019 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.2.2019 16:04
Avatar
Odpovídá na Adam Gajdečka
Uživatel sítě :23.2.2019 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.2.2019 17:22
Chybami se člověk učí, běžte se učit jinam!
Avatar
Tomáš Novotný:23.2.2019 17:23

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

Nahoru Odpovědět
23.2.2019 17:23
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar

Člen
Avatar
:23.2.2019 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.2.2019 17:25
Avatar
Odpovídá na
Adam Gajdečka:23.2.2019 18:12

skvělé, díky.

 
Nahoru Odpovědět
23.2.2019 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.