I am currently working on my resume and trying to have some neat looking circles on it made up of lines.
So I used a repeating-linear gradient, and it works, like it shows up on the browser and on the print screen when you hit CTRL + P, but when you actually save it as a PDF the circle doesn't appear in the PDF file.
I've tried this on Google Chrome, Firefox, Microsoft Edge, and none of these browsers work.
I'm just wondering if maybe there is something I'm doing wrong or if there is a work around to this.
Below is how I set up an example for you to test out, I just made a div in HTML and applied some classes to it in CSS. Try it for yourself, see if you can get the circle made of lines to save to a PDF. I'd appreciate any help in figuring this out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Striped Circle</title>
<style>
.circle {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
}
.circle-1 { /* Top Left */
background-color: transparent;
background-image: repeating-linear-gradient(135deg,
#333 0 4px, /* [color] [start-point] [end-point] */
transparent 4px 10px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="circle circle-1"></div>
</body>
</html>
Whether or not backgrounds are to be printed is an option in the browser.
When you have selected Print and Save to PDF, select more settings and select the background graphics. You should then see the striped circle OK.