I need to draw the five-star on react component for rating.
The result would be something like that.
I would suggest using an SVG file and displaying that instead, since that's much simpler. You can have five elements with the SVG file as the background or 5 img tags, and give each one an ID to see what rating they clicked on.
You can also use a JavaScript function to make them change to a filled in version once someone hovers over a star.
.five-point-star {
position: relative;
display: block;
margin: 12px 0;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 15px solid black;
border-left: 15px solid transparent;
-webkit-transform: rotate(37deg);
-moz-transform: rotate(37deg);
-ms-transform: rotate(37deg);
-o-transform: rotate(37deg);
transform: rotate(37deg);
}
.five-point-star:before {
position: absolute;
display: block;
width: 0;
height: 0;
top: -9px;
left: -12px;
content: "";
border-bottom: 12.3px solid green;
border-left: 4.5px solid transparent;
border-right: 4.5px solid transparent;
-webkit-transform: rotate(323deg);
-moz-transform: rotate(323deg);
-ms-transform: rotate(323deg);
-o-transform: rotate(323deg);
transform: rotate(323deg);
}
.five-point-star:after {
position: absolute;
display: block;
width: 0px;
height: 0px;
top: 0;
left: -20px;
content: "";
border-right: 20px solid transparent;
border-bottom: 15px solid green;
border-left: 20px solid transparent;
-webkit-transform: rotate(286deg);
-moz-transform: rotate(286deg);
-ms-transform: rotate(286deg);
-o-transform: rotate(286deg);
transform: rotate(286deg);
}
<div class="five-point-star"></div>
Related
I am planning to create a online furniture e-commerce website.
I currently having some product customization page option such as color, types of woods and the height and width as well as some add-on such as mirror and some logo.
Is it possible I code the way which when the user select certain customization option such as the color, and the images showed in the product customization page will update accordingly.
For example, the images showed in the page is a cupboard which is brown color, but when the user choose blue color, the cupboard color will be updated into blue cupboard. Then, if user want to add another mirror into cupboard, then the images will be updated become blue cupboard with mirror.
Any article or tutorial related to these fields can i refer to?
Roxas, I've created you a code snippet you can click on the run snippet button below to see the code performing what you are trying to achieve
$(document).ready(function(){
$(".red-circle").click(function(){
$(".color").addClass("red");
$(".color").removeClass("blue");
$(".color").removeClass("green");
});
$(".blue-circle").click(function(){
$(".color").addClass("blue");
$(".color").removeClass("red");
$(".color").removeClass("green");
});
$(".green-circle").click(function(){
$(".color").addClass("green");
$(".color").removeClass("red");
$(".color").removeClass("blue");
});
$(".circle-pick").click(function(){
$(".color").addClass("circle");
$(".color").removeClass("star");
$(".color").removeClass("square");
});
$(".square-pick").click(function(){
$(".color").addClass("square");
$(".color").removeClass("star");
$(".color").removeClass("circle");
});
$(".star-pick").click(function(){
$(".color").addClass("star");
$(".color").removeClass("square");
$(".color").removeClass("circle");
});
});
.red-circle
{
background: red;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.blue-circle
{
background: blue;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.green-circle
{
background: green;
border-radius: 100px;
height: 20px;
width: 20px;
float: left;
margin-right: 5px;
}
.color
{
background: black;
}
.red
{
background: red;
}
.blue
{
background: blue;
}
.green
{
background: green;
}
.color
{
width: 100px;
height: 100px;
border-radius: 0;
display: block;
margin: 0 auto;
}
h2
{
text-align: center;
}
.square-pick, .circle-pick
{
background:black;
height: 20px;
width: 20px;
margin-right: 5px;
float: left;
}
.square, .square-pick
{
border-radius: 0;
}
.circle, .circle-pick
{
border-radius: 100px;
}
.color.star, .color.star:after, .color.star:before
{
border-bottom-color: black;
background: transparent;
}
.red.star, .red.star:after, .red.star:before
{
border-bottom-color: red;
background: transparent;
}
.blue.star, .blue.star:after, .blue.star:before
{
border-bottom-color: blue;
background: transparent;
}
.green.star, .green.star:after, .green.star:before
{
border-bottom-color: green;
background: transparent;
}
.star {
// margin: 50px 0;
position: relative;
text-align: center;
display: block;
color: black;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid;
border-left: 50px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star:before {
border-bottom: 40px solid;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -23px;
left: -33px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -53px;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid;
border-left: 50px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
.star-pick {
float: left;
margin: 10px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 14px solid black;
border-left: 20px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-pick:before {
border-bottom: 16px solid black;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -9px;
left: -13px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star-pick:after {
position: absolute;
display: block;
color: black;
top: 3px;
left: -21px;
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 14px solid black;
border-left: 20px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Color Box</h2>
<div class="color" ></div>
<br/>
<p>Click a color</p>
<div class="red-circle"></div>
<div class="blue-circle"></div>
<div class="green-circle"></div>
<br/>
<p>Click a shape</p>
<div class="circle-pick"></div>
<div class="square-pick"></div>
<div class="star-pick"></div>
I want to cut out my div element from center like a 'V' shape using CSS3.
I hope someone can help me out with this.
So my designer created a design but something like this :
http://prntscr.com/hpa44s
Does anyone have an idea how to create this in css3?
Thanks for helping!
Found a link that helped me solve it.
BODY{
background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;
}
#wrapper {
overflow: hidden;
height: 140px;
}
#test {
height: 101px; /* tweak for ipad */
background-color: #ccc;
position: relative;
}
#test::before {
z-index: -1;
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
border-bottom: 2px solid #000;
border-right: 2px solid #000;
box-shadow: -2px 4px 8px #000;
}
#test::after {
z-index: -1;
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
border-bottom: 2px solid #000;
border-left: 2px solid #000;
box-shadow: 2px 4px 8px #000;
}
http://jsfiddle.net/2hCrw/8/
Im looking to generate a double sided arrow on a div. I was able to generate on the 'after' but before is not working. How can I do it?
div {
width: 5px;
height: 220px;
background-color: red;
/* Rotate div */
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: bottom left;
position: relative;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-style: solid;
transform: translate(-40%, -50%);
border-width: 0 10px 20px 10px;
border-color: transparent transparent red transparent;
}
div:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-style: solid;
transform: translate(-40%, -50%);
border-width: 0 10px 20px 10px;
border-color: transparent transparent red transparent;
}
<div></div>
View on JSFiddle
You have the same rule for both :before and :after. Just adjust it sligtly and you're golden.
div {
width: 5px;
height: 220px;
background-color: red;
/* Rotate div */
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: bottom left;
position: relative;
}
div:before,
div:after {
content: '';
position: absolute;
left: 0;
border-style: solid;
border-color: red transparent;
}
div:after {
top: 0;
transform: translate(-40%, -50%);
border-width: 0 10px 20px 10px;
}
div:before {
bottom: 0;
transform: translate(-40%, 50%);
border-width: 20px 10px 0 10px;
}
<div></div>
Hi have update your fiddle:
https://jsfiddle.net/p6tryx79/1/
div {
width: 5px;
height: 120px;
background-color: red;
/* Rotate div */
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: bottom left;
position: relative;
margin-left:30px;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-style: solid;
transform: translate(-40%, -50%);
border-width: 0 10px 20px 10px;
border-color: transparent transparent red transparent;
}
div:before {
content: '';
position: absolute;
bottom: -6px;
left: -4px;
border-style: solid;
transform: rotate(60deg);
border-width: 0 10px 20px 10px;
border-color: transparent transparent red transparent;
}
How can I make css like this as picture below:
Can be achieved using manipulating border radius
CSS
.graph {
height: 100px;
width: 200px;
background: transparent;
border-radius: 0px 0px 0px 370px/225px;
border: solid 5px grey;
border-top:none;
border-right:none;
margin:20px;
}
.graph:before {
height:20px;
width: 10px;
border: 5px solid grey;
border-radius: 30px 30px 0px 0px /75px 75px 0px 0px ;
display: block;
content: "";
border-bottom:none;
position:relative;
top: -9px;
left: -12px;
}
HTML
<div class = "graph"><div>
https://jsfiddle.net/u663m81s/
You could use a pseudo element for this:
div {
height: 300px;
width: 300px;
background: lightgray;
position: relative;
border-bottom: 5px solid black;
border-right: 5px solid black;
}
div:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
border: 3px solid transparent;
border-bottom-color: black;
top: -5px;
left: 50%;
border-radius: 50%;
transform: rotate(45deg);
}
<div></div>
You could then play with the height and width properties of the pseudo element to 'stretch' the line. Please note: this may require small adjustments to the top and left properties for positioning
Change height as per requirement !
You can play with parameters to suit your needs !!
.box{
width:100px; height:80px;
border:solid 3px #000;
border-color:transparent transparent #000 #000;
border-radius: 0px 0px 0px 250px;
}
<div class="box"></div>
An arrow in css, from css-tricks.com/ShapesOfCSS
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
<div id="curvedarrow"></div>
You can alternatively use SVG: http://codepen.io/gaelb/pen/mJePGM
I'm playing around trying to draw a simple folder icon with CSS, and this is where I'm at:
/* CSS */
.container {
border: solid 1px #000;
width: 100px;
height: 100px;
padding: 5px;
text-align: center;
}
.folder_tab, .folder {
margin: 0 auto;
background-color: #708090;
}
.folder_tab {
width: 25px;
height: 5px;
margin-right: 50%;
border-radius: 5px 15px 0 0;
}
.folder {
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
}
<!-- HTML -->
<div class="container">
<div class="folder_tab"></div>
<div class="folder"></div>
text
</div>
Result:
Is there a simpler, or more elegant way to do this?
This is my solution, if you want to use CSS3.
HTML
<div class="folder"></div>
CSS
.folder {
width: 150px;
height: 105px;
margin: 0 auto;
margin-top: 50px;
position: relative;
background-color: #708090;
border-radius: 0 6px 6px 6px;
box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}
.folder:before {
content: '';
width: 50%;
height: 12px;
border-radius: 0 20px 0 0;
background-color: #708090;
position: absolute;
top: -12px;
left: 0px;
}
DEMO (tested in Chrome)
I know this thread is a bit old, but I bounced into this question by asking myself if there was something simple in pure CSS and minimalistic HTML to update my old tree library which uses background images for icons.
I tried by myself and I came up with something in line with the flat design which today is revolutioning cross-devices UI's:
https://jsfiddle.net/landzup/Lzjadp5r/
It is just a suggestion or a starting point, but it is amazing watching the page not losing a single pixel of resolution by zooming in as much as possible! (Just like vector graphics).
I used a brief HTML:
<div class="folder">
<div class="icon"></div>
Programming
</div>
And this is the CSS:
<style type="text/css">
.folder {
display: block;
position: relative;
top: 0;
left: 0;
margin: 18px 0;
font: 18px helvetica, arial, sans-serif;
text-indent: 27px;
line-height: 34px;
}
.folder .icon {
content: "";
display: block;
float: left;
position: relative;
top: 0;
left: 0;
width: 30px;
height: 30px;
border: 2px solid #999;
background: #ddd;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;
-moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-o-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
}
.folder .icon::after {
content: "";
display: block;
position: relative;
top: 7px;
left: -6px;
width: 30px; height: 21px;
border: 2px solid #999;
background: #ddd;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;
-moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-o-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
}
</style>
It uses CSS 3 transformations, so you should consider your target audience to support its browsers.
Here there are CSS compatibility tables for CSS transformation:
http://caniuse.com/#feat=transforms2d
Here is my solution:
http://jsfiddle.net/wQdgs/
HTML
<div>text</div>
CSS
div {
width: 100px;
height: 50px;
padding-top: 50px;
border: solid 1px #000;
position: relative;
text-align: center;
}
div:after {
content: " ";
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
display: block;
background-color: #708090;
position: absolute;
top: 15px;
left: 25px;
}
div:before {
content: " ";
width: 25px;
height: 5px;
border-radius: 5px 15px 0 0;
display: block;
background-color: #708090;
position: absolute;
top: 10px;
left: 25px;
}