<svg id="btn" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M 10,10 L 300,10 S 230,75 300,150 L 10,150 S 70,75 10,10 z" stroke="transparent" fill="#24d992" stroke-width="3"/>
</svg>
$(window).scroll(function(){
if($(this).scrollTop() > 1){
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
});
<form >
<input type="radio" name="name" id="r-1" class="input" checked>
<input type="radio" name="name" id="r-2" class="input">
<input type="radio" name="name" id="r-3" class="input">
<label for="r-1" class="label l-1">Текст 1</label>
<label for="r-2" class="label l-2">Текст 2</label>
<label for="r-3" class="label l-3">Текст 3</label>
</form>
.label {
display: none;
}
#r-1:checked~.l-1,
#r-2:checked~.l-2,
#r-3:checked~.l-3{
display: block;
}
Какие есть нюансы?
.header
, .footer
, .main
.width: 1000px;
на max-width: 1000px; width: 100%;
.@media screen and (max-width: XXpx ) { ... }
, лучше, конечно, @media screen and (min-width: XXpx ) { ... }
, либо применять ширину в %, где есть возможность.img { max-width: 100%; width: 100%; height: auto; }
<div class="wrap">
<a href="#" class="btn"></a>
</div>
.wrap {
background: #000;
}
.btn {
display: block;
position: relative;
width: 15rem;
height: 7rem;
background: #fff;
margin: 0 auto;
border-radius: 0 1rem 1rem 0;
}
.btn:before {
content: '';
width: 0;
height: 0;
border-top: 3.5rem solid transparent;
border-bottom: 3.5rem solid transparent;
border-right: 3rem solid #fff;
position: absolute;
top: 0;
bottom: 0;
left: -3rem;
}
* Текст
    * Текст     
* Текст
<br/>
<br/>
* Текст
<br/>
<br/>