Develop Reference

how to transform my rectangle into a losange in react native with css?

Hello i'm stuck with this little problem my customer wants to do this in react native the orange border and i really suck in css how can i do it please ?

By skewing a containing parent and counter skewing its child elements you can create what you need with a few lines of CSS:
/* Solution */
.item { transform: skew(-15deg) } /* skew */
.item .content { transform: skew( 15deg) } /* reset */
/* Just eye-candy */
.wrapper { display: flex; gap: 0.5rem }
.item { border: 2px solid orange }
.item .content { padding: 0.5rem 1rem }
.item:hover { cursor: pointer; background-color: hsl(0,0%,96%); border-color: black }
<div class="wrapper">
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
</div>

You can use the transform skew function in css. I would use it on an after pseudo element, so the content of the div will not be deformed. Like so:
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
}
<div class="losange">test</div>
EDIT:
If you also want the background color to be skewed, you can do this by adding it to the after element pseudo element and setting the z-index to -1, which will put it behind the content of the losange.
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
background-color: #eeeeee;
z-index: -1;
}
<div class="losange">test</div>

Responsive menu viewport height

I added a menu to my responsive website that pops up as soon as the viewport is 714px width or less.
When you click the button a menu slides out from the side across the page. The issue that I can't seem to solve is that I want the menu to be the height of the current viewport without allowing people to scroll down.
Here's a fiddly of what the menu looks like right now:
https://jsfiddle.net/baqcfjt1/1/
<div class="site-container-menu">
<div class="site-pusher">
<header class="header">
MENU
<nav class="menu">
Link 1
<strong>Link 2</strong>
Link 3
Link 4
</nav>
</header>
<div class="site-content">
<div class="container-menu">
<section id="header">
<div class="headerlogo"><img src="image" /></div>
<div class="headerlogosmall"><img src="image" /></div>
</section>
<section class="main">
-content-
</section>
</div>
</div>
<div class="site-cache" id="site-cache"></div>
</div>
</div>
CSS
.header {
z-index: -10;
position: absolute;
}
/* RESPONSIVE */
#media only screen and (max-width: 714px) {
.container-menu {
overflow: hidden;
*zoom: 1;
}
/* HEADER */
.header__logo {
font: inherit;
font-weight: 700;
padding: 0 25px;
float: left;
}
/* MENU */
.site-pusher,
.site-container-menu {
height: 100%;
}
.site-container-menu {
overflow: hidden;
}
.site-pusher {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.site-content {}
.header {
position: static;
height: 66px;
line-height: 62px;
color: rgba(228, 91, 65, 1.00);
background-color: #fff;
}
.header__icon {
position: relative;
display: block;
float: left;
padding-left: 3em;
font: inherit;
font-weight: 400;
font-size: 20px;
height: 66px;
cursor: pointer;
}
.header__icon:after {
content: '';
position: absolute;
display: block;
width: 1rem;
height: 0;
top: 16px;
left: 15px;
box-shadow: 0 10px 0 1px rgba(228, 91, 65, 1.00), 0 16px 0 1px rgba(228, 91, 65, 1.00), 0 22px 0 1px rgba(228, 91, 65, 1.00);
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
/* overflow-y: scroll;
-webkit-overflow-scrolling: touch;*/
width: 250px;
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
overflow: hidden;
}
.menu a {
display: block;
padding-top: 2em;
padding-bottom: 2em;
color: #666666;
height: 25%;
text-align: center;
line-height: 40px;
border-bottom: 1px solid #d9d9d9;
}
.menu a:hover {
color: #e45b41;
}
.with--sidebar .site-pusher {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.with--sidebar .site-cache {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
}
}
$(document).ready(function() {
(function($) {
$('#header__icon').click(function(e) {
e.preventDefault();
$('body').toggleClass('with--sidebar');
});
$('#site-cache').click(function(e) {
$('body').removeClass('with--sidebar');
});
})(jQuery);
});

This can be achieved using viewport-percentage length units: https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths
One option would be to use the vh css unit and specify that the body has height:100vh
https://jsfiddle.net/r61n4y0v/
I added:
body{
height:100vh;
}
to the CSS file.
You should also check the vh unit's browser compatibility, before using it. You can check here:
http://caniuse.com/#feat=viewport-units
If you'd like to be more specific with the height:100vh; rule, you can remove the overflow:hidden from .site-container-menu and add height:100vh to .menu directly:
https://jsfiddle.net/6won6stx/
Your menu links have both a height defined height:25% and padding...this is not advised as it can lead to unexpected behaviour. It would be better to replace:
<nav class="menu">
Link 1
<strong>Link 2</strong>
Link 3
Link 4
</nav>
With:
<nav class="menu">
<ul>
<li>Link 1</li>
<li><strong>Link 2</strong></li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
and remove the height:25% from the a element and add height:25vh to the li elements.
https://jsfiddle.net/s5gbk7y1/
I've also made a few other changes such as changing the line-height property on the menu links to 25vh.
Take a look at the latest fiddle and let me know if it helps!

Scrolling bug in Firefox

I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.
Link here
A bit of the HTML:
<div class="full-menu">
<div class="full-menu--middle">
<button class="menu-toggle menu-toggle--close"></button>
<div class="section group menu_items">
<ul>
<li>a bunch of options vvv</li>
</ul>
</div>
</div>
</div>
A bit of the CSS:
html,
body {
height: 100%;
width: 100%;
}
.main_menu {
display: none;
}
.full-menu {
visibility: hidden;
display: table;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.full-menu--open {
visibility: visible;
opacity: 1;
}
.full-menu--middle {
display: table-cell;
vertical-align: middle;
}
.menu-toggle {
background-color: transparent;
border: 0;
color: #fff;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu-toggle--close {
position: fixed;
top: 20px;
left: 20px;
}
.menu-toggle_black {
background-color: transparent;
border: 0;
color: #000;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle_black:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu_items{
overflow: scroll;
height: 100%;
}
.page_inner_ {
display: table-cell;
vertical-align: middle;
}
.page_container {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #ffffff;
}
Any help would be very much appreciated!
Thanks

Maybe you should give position: absolute; to .full-menu, instead of fixed.

Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu.

How to Fix Overflow Issues in CSS Flex Layouts:
"... add min-height: 0; to the flex child that has our overflow container ..."
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/

Absolute position of button centered but now full width

I have fixed this issue before on a previous project but have totally forgotten how i resolved it so thought I would see if anyone knows of the top of their heads :)
I absolute position a button at the bottom of a container, and use left: 0 and right: 0 to center the button but then it makes it full width any ideas how to prevent this?
fiddle mockup: http://jsfiddle.net/1t6Ljkjg/
ul li img {
width: 500px;
}
.ty-subcategories__item {
position: relative;
margin: 0;
display: inline-block;
width: 49%;
}
.ty-subcategories__item .logo-box {
width: 58%;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
text-align: center;
}
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
<ul>
<li class="ty-subcategories__item">
<a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/butterfly-sofa-bean-bags/" class="ty-subcategories-block__a">
<img class="ty-pict ty-subcategories-img " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-butterfly.jpg?t=1437997789" alt="left" title="left">
<div class="logo-box left"><span class="ty-btn ty-btn__primary">Shop Now</span>
</div>
</a>
</li>
</ul>

Rather than using left:0 and right:0, you could consider using a CSS transform to center your button. For example, your declaration block might turn into:
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
}
Here's an updated JSFiddle. Hope this helps! Let me know if you have any questions.
EDIT: Though, if you were hoping to get it centered in the black box (and not just the button's parent element), you'll need to update the width of the parent to something like:
.ty-subcategories__item .logo-box {
width: 161px;
}
(I assumed the black box is square.) Here's a new JSFiddle.
EDIT 2: To make the centering work responsively, we can do a little math: Assuming the black box is square, and the image width/height ratio are always the same, we can then calculate the percentage of the width of the image the box takes, with:
520 (height of image) / 1610 (width of image) * 100% = 32.3%
So this is the width needed for the parent of the button. To avoid text breaking to multiple lines in the button, you can specify the white-space property. So your CSS could become:
ul li img {
width: 100%;
height: 100%;
}
.ty-subcategories__item {
position: relative;
margin: 0;
display: inline-block;
width: 100%;
}
.ty-subcategories__item .logo-box {
width: 32.3%;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
text-align: center;
}
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
white-space: nowrap;
}
Here's another updated JSFiddle. Let me know if this helps!

HTML Onclick doesn't work with negative z-index

I placed a negative z-index property on my image section to prevent it from overlapping the navigation bar, which caused the hyperlinks to not function properly. After I fixed that problem, I realized that my left and right buttons for my slideshow would not work. Any help enabling the buttons to work even with a negative z-index? All the code that I have pasted below is necessary.
HTML
<div id="container">
<header>
<h1><b>Seattle</b>&Metropolitan</h1>
<nav>
<ul>
<li>About</li>
<li>Buildings</li>
<li id="contact">Contact Us</li>
</ul>
</nav>
</header>
</div>
<div class="image-section">
<img src="img/seattleskyline.jpg" alt="Seattle Skyline" id="center-image" />
<div id="caption"><div id="caption-text">A panoramic view of 1201 Third Avenue at night</div></div>
<button id="sliderLeft" onclick="left();"></button>
<button id="sliderRight" onclick="right();"></button>
</div>
<br><br>
<div class="content">
Seattle's history can be traced back to the 1850s, when pioneers and natives started building a great city filled with a diverse culure, beautiful scenery, and a vibrant enviornment. The metropolitan area of Seattle now is a high-tech hub, in which four Fortune 500 companies reside: <b>Amazon.com (#49)</b>, <b>Starbucks (#208)</b>, <b>Nordstrom (#227)</b>, and <b>Expeditors International (#428)</b>.
</div>
CSS
#charset "utf-8";
#container
{
width: 75%;
margin-left: auto;
margin-right: auto;
}
header h1
{
font-size: 38px;
float: left;
font-weight: 100;
}
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
}
header nav ul li
{
line-height: 105px;
display: inline;
padding: 45px;
font-size: 22px;
font-weight: 100;
}
header nav ul li a
{
color: black;
text-decoration: none;
}
#center-image
{
width: 100%;
height: 480px;
}
#contact
{
padding-right: 0;
}
.image-section
{
margin-left: auto;
margin-right: auto;
width: 75%;
position: relative;
text-align: center;
}
.image-section #caption
{
position: absolute;
display: none;
bottom: 4px;
width: 100%;
text-align: center;
color: white;
background: #474747;
height: 50px;
line-height: 50px;
opacity: 0.8;
font-size: 20px;
}
.image-section button
{
outline: 0;
}
.image-section #sliderLeft
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
left: 0;
opacity: 0.7;
filter: alpha(opacity=70);
border: 0;
}
.image-section #sliderRight
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
right: 0;
opacity: 0.7;
filter: alpha(opacity=70);
border: 0;
}
JS
var images = ["img/seattleskyline.jpg", "img/spaceneedle.jpg", "img/ferriswheel.jpg"]
var captions = ["A panoramic view of 1201 Third Avenue at night", "The Seattle's landmark Space Needle", "The Iconic Great Wheel"]
var index = 0;
function left() {
index -= 2;
if (index < 0) {
index = images.length;
}
changeImage();
}
function right() {
changeImage();
}
function changeImage() {
index++;
if (index > images.length - 1) {
index = 0;
}
var targetImage = document.getElementById("center-image");
var caption = document.getElementById("caption-text");
$("#center-image").fadeOut(1000, function() {
targetImage.src = images[index];
$("#center-image").fadeIn(1000);
});
$("#caption-text").fadeOut(1000, function() {
caption.innerHTML = captions[index];
$("#caption-text").fadeIn(1000);
});
}
$(document).ready(function() {
$("#sliderRight").fadeIn(1000);
$("#sliderLeft").fadeIn(1000);
$("#caption").fadeIn(1000);
setInterval(changeImage, 7000);
});

z-index take effect when position is relative or absolute so if you want use it with your css
add position: relative; as following so z-indexs take effect
header nav ul
{
position: relative;
z-index: 9999;
}
.image-section
{
position: relative;
}
.image-section #sliderLeft
{
z-index: 999;
}
.image-section #sliderRight
z-index: 999;
}
Correct CodePen

Change your CSS for header nav ul to :
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
position: relative; /* add this */
}
Working jSfiddle