Can this be done with css?

HTML & CSS
1

is there a way to create this pink stretch with css?

http://muslimahwebdesign.co.uk

2

sorry I’m changing the home page so attaching a pic of the pink stretch. Can it be done with css instead of body background?

3

Possibly with some advanced CSS, but I wouldn’t go that route, as it will be tricky cross browser. Just go with a background image.

Off Topic:

By the way, “If your a muslim woman”? Some editing needed there. :wink:

4

ok maybe something to look for in the future then.

What’s the typo? Do you mean muslimah as it is the female version of muslim

5
Off Topic:

It should be “If you’re a Muslim woman” :slight_smile:

6

I read it over and still didn’t realise!

Thanks

7

It’s possible to get a circular design using CSS3 however I doubt it’s possible to generate the same shape. It’s better to just stick to an image :slight_smile:

8

Here you go :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0
}
.strip {
	background:#e5308f;
	position:relative;
	height:125px;
	overflow:hidden;
}
.strip:before, .strip:after {
	content:" ";
	position:absolute;
	top:-25px;
	left:-10%;
	right:-10%;
	height:50px;
	background:#fff;
	overflow:hidden;
	border-radius:100%;
}
.strip:after {
	top:auto;
	bottom:-25px;
}
</style>
</head>

<body>
<h1>Stripe test</h1>
<div class="strip"></div>
</body>
</html>