Zagięty róg w ostatnim przycisku ma uruchamiać sie na górze po prawej stronie

Question

Witam.

Po pierwsze - Wesołych Świąt!

Po drugie - chciałbym, aby zagięty róg w trzecim (ostatnim) przycisku "Kontakt" uruchamiał sie na górze po prawej stronie.

 

Tutaj zagięty róg uruchamia sie na każdym przycisku po lewej stronie:

https://jsfiddle.net/Krzysiek_35/tyozuLsd/120/

 

Próbowałem takiego sposobu, ale to nie działa:

https://jsfiddle.net/Krzysiek_35/tyozuLsd/126/

 

Wprowadziłem tylko takie poprawki:

.tab:last-child:before
{
	top: 0;
	right: 0;
}

.tab:hover, .tab:focus, .tab:active, .tab:last-child
{
	color: #FFF;
	cursor: pointer;
	background-color: #000000;
}

.tab:hover:before, .tab:focus:before, .tab:active:before, .tab:last-child:before
{
	width: 20px;
	height: 20px;
}

Czy wiecie jak zrobić, aby zagięty róg w ostatnim przycisku "Kontakt" uruchamiał sie na górze po prawej stronie?

Będę bardzo wdzięczny za pomoc.

Answer 1

Kolego na szybkiego nie zagłębiając się  bardziej w kod do twojego  menu dodałem  class first oraz last dla  tych  class są osobne  napisane style. Po dodaniu  class  uzyskałem efekt:

https://jsfiddle.net/8seokm25/

Comments

Super, teraz działa elegancko.

Dzięki, mistrzu.

Jeszcze jedna, ale drobna prośba.

Tak sie prezentuje kod:

https://jsfiddle.net/Krzysiek_35/axwc5q6z/29/

Po wciśnięciu Kliknij tutaj! chciałbym, aby zagięty róg w pierwszym przycisku "Strona główna" uruchamiał sie standardowo na górze po lewej stronie.

Zauważ, że to działa tylko wtedy, gdy klikniesz na przycisk "Strona główna" - wtedy ten zagięty róg uruchamia sie standardowo na górze po lewej stronie.

Czy wiesz jak zrobić, aby ten zagięty róg uruchamiał sie standardowo na górze po lewej stronie po wciśnięciu Kliknij tutaj! ?

Będę bardzo wdzięczny za pomoc.

---

Chcesz aby ten element był widoczny cały czas na tym przycisku po kliknięciu.

przykład:strona główna (lewy  róg był zagięty) o mnie (lewy  róg był zagięty) kontakt (prawy róg był zagięty)

edit:

efekt dla napisu  kliknij tutaj

https://jsfiddle.net/dj24qpho/

edit:

Poprawa  wyglądu menu i napisu

https://jsfiddle.net/1826u3ed/

---

Te Twoje 2 linki dają jeszcze gorszy efekt:

https://jsfiddle.net/dj24qpho/

https://jsfiddle.net/1826u3ed/

...ponieważ po wciśnięciu Kliknij tutaj! uruchamia sie tam przy tekście ten zagięty róg na górze po lewej. Po wciśnięciu Kliknij tutaj! ma nie być tam zagiętego rogu.

Po wciśnięciu Kliknij tutaj! ten zagięty róg ma sie uruchomić na górze po lewej TYLKO na przycisku "Strona główna".

---

body
{
	background-color: #363636;
	font-family: Verdana;
}

.header
{
	background-color: #191919;
	position: absolute;
	left: 5%;
	top: 8%;
}


.header .text a
{
  color: gray;
	font-size: 31px;
	text-decoration: none;
	display: block;
}

.header .text span
{
  color: red;
	font-size: 31px;
	text-decoration: none;
}

.tab-content
{
	left: 5%;
	top: 28%;
	position: absolute;
}

.tablist
{
	padding: 0;
	list-style: none;
}

.tab
{
	float: left;
	margin-left: 0px;
	width: 150px;
	line-height: 35px;
	background-color: #087380;
	color: #FFF;
	font-size: 11px;
	text-align: center;
	text-decoration: none;
	outline: none;
	margin-right: 15px;
	transform: translateZ(0);
}
.last:before
{
  top: 0;
  right: 0;
	transform: rotate(90deg);
}
.first:before
{
  top:0;
  left:0;
}
.tab:before
{
	pointer-events: none;
	position: absolute;
	content: '';
	height: 0;
	width: 0;

  background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
	z-index: 1000;
	transition-duration: 0.3s;
	transition-property: width, height;
}

.tab:hover, .tab:focus, .tab:active
{
	color: #FFF;
	cursor: pointer;
	background-color: #000000;
}

.tab:hover:before, .tab:focus:before, .tab:active:before, .header:active + .tab-content .tabpanel .tablist #tab1::before
{
	width: 20px;
	height: 20px;
}

.panel-1
{
	clear: both;
	width: 100%;
	position: relative;
}

.box1
{
	background-color: #000000;
	width: 100%;
}

.box1 .inner1
{
	padding: 0px 0px 100px;
}

.panel-2
{
	clear: both;
}

.box2
{
	background-color: #000000;
	width: 100%;
}

.box2 .inner2
{
	padding: 0px 0px 100px;
}

.panel-3
{
	clear: both;
}

.box3
{
	background-color: #000000;
	width: 100%;
}

.box3 .inner3
{
	padding: 0px 0px 100px;
}

li[aria-selected='true']
{
	background-color: #000000;
	color: #FFF;
	width: 150px;
	line-height: 35px;
	font-size: 11px;
	text-align: center;
	text-decoration: none;
	outline: none;
	margin-right: 15px;
}

div[aria-hidden='true']
{
	display: none;
}

div[aria-hidden='false']
{
	display: block;
}

<body>

<div class="header">
  <div class="text">
	  <a href="#" title="Odśwież bieżącą stronę">Kliknij 
      <span>tutaj!</span>
    </a>
	</div>
</div>
		

<div class="tab-content">
  <div class="tabpanel">
    
    <ul class="tablist" role="tablist">
		  <li id="tab1" class="tab first" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Strona główna</li>
		  <li id="tab2" class="tab first" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">O stronie</li>
			<li id="tab3" class="tab last" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Kontakt</li>
	  </ul>
      
    <div id="panel1" class="panel-1" aria-labelledby="tab1" role="tabpanel" aria-hidden="false">
		  <div class="box1">
			  <div class="inner1"></div>
			</div>
    </div>
      
    <div id="panel2" class="panel-2" aria-labelledby="tab2" role="tabpanel" aria-hidden="true">
		  <div class="box2">
			  <div class="inner2"></div>
		  </div>
    </div>
      
	  <div id="panel3" class="panel-3" aria-labelledby="tab3" role="tabpanel" aria-hidden="true">
		  <div class="box3">
			  <div class="inner3"></div>
		  </div>
    </div>
  </div>
</div>

</body>

Dodałem tylko to.

/* ... */ .header:active + .tab-content .tabpanel .tablist #tab1::before /* ... */

---

Sorry, ale zapomniałem, że ta ARIA też jest obsługiwana przez JS. Dopisałem tam cały JS + Twoją poprawkę i nadal nie ma efektu końcowego.

Twoja poprawka:

.tab:hover:before, .tab:focus:before, .tab:active:before, .header:active + .tab-content .tabpanel .tablist #tab1::before
{
	width: 20px;
	height: 20px;
}

Z tym dodanym JS + Twoją poprawką wygląda to następująco:

https://jsfiddle.net/Krzysiek_35/axwc5q6z/39/

Tak sie składa, że gdy wprowadziłem Twoją poprawkę, to u mnie na stronce zniknęły wszystkie zagięte rogi na przyciskach (po kliknięciu i po najechaniu kursorem).

Na jsfiddle te zagięte rogi uruchamiają sie, ale to akurat mało istotne.

Skoro u mnie na stronce zniknęły te zagięte rogi, to oznacza, że gdzieś tkwi błąd w Twojej poprawce.

Czy warto tam dodawać te nazwy selektorów?

---

@Krzysiek_34,

Nie zrozumiałem do końca o co ci chodziło. Dlatego taki dałem efekt z domyślenia się. Ale widzę, że  już masz efekt  który cię  interesował. @ Chess  podał już ci rozwiązanie.

---

Chess wprowadził następującą poprawkę:

.tab:hover:before, .tab:focus:before, .tab:active:before, .header:active + .tab-content .tabpanel .tablist #tab1::before
{
	width: 20px;
	height: 20px;
}

...ale jeszcze pogorszyło to zamierzony efekt, bo u mnie na stronce zniknęły wszystkie zagięte rogi na przyciskach (po kliknięciu i po najechaniu kursorem).

---

Najlepszym rozwiązaniem będzie jak wstawisz część kodu strony  wtedy znajdziemy problem bo przy menu na obecną chwilę nie widzę problemu

---

Jak możesz, to zapodaj mi swój e-mail. Wyślę Ci na maila: index.html (z tym dodatkowym JS) + style.css

Wtedy będzie Ci najłatwiej ogarnąć ten temat.

Dobra?

---

wstaw go tutaj ustaw  czas  i ustaw nie publiczni i wyślij mi na  pw link ja za 30min->1h bede bo muszę wyjść  teraz

Answer 2

:root {
  --main-bg-color: darkgoldenrod;
  --gr-bg-color: violet;
}

body {
  background: var(--main-bg-color);
}
#one, #two {
  width: 0;
  height: 0;
  transition: 2s;
  position: absolute;
}
#one {
	background: linear-gradient(45deg, var(--gr-bg-color) 50%,  var(--main-bg-color) 50%);
  left: 200px;
}

#two {
  background: linear-gradient(135deg, var(--main-bg-color) 50%, var(--gr-bg-color) 50%);
  left: 0;
}

#zero:hover #one {
  width: 100px;
  height: 100px;
  left: 100px;
  
}

#zero:hover #two {
  width: 100px;
  height: 100px;
  left: 0;
}

<div id="zero" style="background: gray; width: 200px; height: 100px; position: relative;">
  <div id="one"></div>
  <div id="two"></div>
</div>

body {
  margin-top: 100px;
  background: darkgoldenrod;
}
#one, #four, #five, #six {
  width: 0;
  height: 0;
  transition: 6s;
  position: absolute;
}
#one {
  z-index: 999;
  background: linear-gradient(45deg, green 50%, transparent 50%);
  left: 200px;
}
#four, #five {
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: orange;
}
#six4 {
  right: 50px;
  top: 100px;
  width: 50px;
  height: 50px;
  z-index: -900;
  background: green;
}
#two {
  right: 100px;
  top: 0;
  width: 100px;
  height: 100px;
  background: orange;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
  color: green;
  font-weight: bold;
}
#zero:hover #one {
  width: 50px; 
  height: 50px;
  left: 150px;
}
#zero:hover #four {
  width: 50px;
  height: 50px;
  right: 50px;
  top: 50px;
}
#zero:hover #five {
  right: 100px;
  top: 0px;
  width: 50px;
  height: 100px;
}
#three {
  position: absolute;
  right: 0;
  top: 0;
  transition: 6s;
}
#zero:hover #three {
  position: absolute;
  right: -50px;
  top: 0px;
}

<div id="zero" style="width: 200px; height: 100px; position: relative;">

  <div id="one"></div>
  <div id="three">
    <div id="four"></div>
    <div id="five"></div>
  </div>
  <div id="two">Contact</div>
  
</div>

W ten sposób można napisać te tło z transparent (ostatni przykład) i nie trzeba definiować "zmiennej CSS".

Comments

Tak sie prezentuje Twój kod:

https://jsfiddle.net/Krzysiek_35/r2p0zdtm/2/