IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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í.

Diskuze: Stuha u sloupce

Aktivity
Avatar
Adam Gajdečka
Člen
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
Uživatel sítě
Tvůrce
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ý
Člen
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
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í
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
23.2.2019 17:25
Avatar
Adam Gajdečka
Člen
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.