how to make smooth linear gradient stripe with border-radius

0
votes

I am trying to create stripes using linear-gradient but can't get the angle combination to produce a smooth effect thats not blotchy.

Current code is 

.circle {


background: linear-gradient(-45deg, rgba(255,255,255, 1) 25%, transparent 25%, transparent 50%, rgba(255,255,255, 1) 50%, rgba(255,255,255, 1) 75%, transparent 2%, transparent);
    background-size:40px 40px ;
    width:300px;
    height:300px;
    border-radius:150px;
-moz-background-clip: padding;  
background-clip: padding-box; 
-webkit-background-clip: padding-box;
}

http://jsbin.com/fohayaxa/1/edit

1
css

1 Answers

0
votes

The effect looks clean to me, I see smooth angled lines. There are similar patterns on this site that achieve what you're looking for (or have already done).