-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclip-path.html
43 lines (38 loc) · 9.97 KB
/
clip-path.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>Clip-path</title>
<style>
/* must visit bennetfeely.com */
/* caniuse.com */
img{
/* clip-path: circle(40% 50% at 50%); */
/* shape-outside: ellipse(10% 40% at 50% 10%);
clip-path: ellipse( 10% 40% at 50% 10%); */
/* clip-path: inset(5% 20% 5% 50%); */
/* clip-path: polygon(50% 0% , 0% 100% , 100% 100%); */
/* clip-path: polygon(50% 0% , 100% 50% , 50% 100% , 0% 50%); */
float: left;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
shape-outside:polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%) ;
shape-margin: 10px;
}
/* #box{
background-color: aquamarine;
width: 800px;
height: 700px;
clip-path: polygon(50% 0% , 100% 50% , 50% 100% , 0% 50%);
shape-outside: polygon(50% 0% , 100% 50% , 50% 100% , 0% 50%);
} */
</style>
</head>
<body>
<h1>Noman sami : clip-path | shape outside</h1>
<img src="bg.jpg" alt="bgimage">
<!-- <div id="box"> Div</div> -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo minus cum voluptas animi sit iste dignissimos, repellat itaque quibusdam, id repudiandae cupiditate aspernatur consectetur blanditiis provident, veniam quasi impedit quo consequatur consequuntur fugit alias nam. Veniam porro magnam, ea, vero blanditiis tempora cumque hic qui id laborum et similique voluptate minima voluptatum, quis animi ut expedita nulla ipsam accusantium? Dolore inventore iure corporis officia nostrum numquam nam aliquid repellendus reiciendis velit et ipsa minus error illum esse officiis corrupti autem commodi, quia facilis qui, molestiae exercitationem. Necessitatibus omnis soluta ipsa libero, nam enim inventore molestiae sapiente non fuga beatae tenetur dolorum perferendis dolorem aspernatur et animi at, quos aperiam! Cum quibusdam eius illo quas nam alias excepturi dolore corrupti officiis. Tempore consequuntur doloribus nulla saepe quo, perferendis quibusdam porro id voluptas magni commodi facilis accusantium exercitationem. Itaque enim explicabo eligendi, iusto tempore autem deleniti pariatur? Laboriosam enim minima sapiente esse corporis a dolorum explicabo, incidunt in, ut suscipit. Veniam explicabo amet a quam inventore vitae dolore aliquid rerum! Asperiores aperiam tempore dolorum, nisi minus sed, aliquid quis animi veniam rerum doloremque odit. Aliquid est magnam eum eaque soluta mollitia unde accusamus omnis quae tempora, a labore beatae optio blanditiis accusantium atque repellendus! Quibusdam tenetur, aut dignissimos blanditiis facere rem asperiores minus placeat cupiditate magnam illum nesciunt quia voluptates? Autem deserunt cum eligendi sit mollitia. Maiores dolore modi voluptatibus odio esse necessitatibus dolorum voluptatem dolor id vero corporis veritatis, saepe temporibus cumque quos mollitia, voluptas eveniet et ipsa placeat aspernatur adipisci voluptate sit? Eveniet sequi explicabo aut blanditiis distinctio sunt harum id perferendis! Fugiat dicta necessitatibus cupiditate. Unde optio mollitia sint iure minima animi placeat, inventore quasi minus molestiae dolorum illum sed fugiat maxime esse magni recusandae perferendis ex dolores, ipsam laborum! Quos ea maiores voluptatem, aspernatur ullam accusantium molestias voluptate neque, soluta ad dolore ipsam qui excepturi commodi praesentium cum? Ipsum magnam eligendi minus expedita doloribus. At quam vero officia porro placeat nam corporis adipisci expedita odio animi, molestias eveniet sint maiores inventore omnis architecto, voluptates, incidunt asperiores blanditiis tempora perspiciatis. Laboriosam omnis architecto nam aperiam, doloribus non beatae. Aliquam minima quae, eos nulla laborum mollitia culpa quam error, cum iusto adipisci blanditiis maxime. Sint nisi totam mollitia magni magnam explicabo rem hic dolores, voluptate fugiat nesciunt architecto et, earum, error expedita commodi doloremque. Nemo optio distinctio eos beatae deserunt. Distinctio dolor et voluptates, repudiandae quam a, sapiente deleniti nam asperiores facere necessitatibus culpa ducimus ipsam molestiae ab nihil voluptatum voluptate expedita voluptatibus modi iure laboriosam est soluta. Est eos non a minus, libero aliquam illum, autem corrupti repudiandae voluptatem deserunt at veritatis, ratione cumque commodi explicabo officiis corporis consequuntur reprehenderit. At, modi pariatur commodi quae nam sit aspernatur vero accusamus ipsam neque animi quaerat fugit repudiandae qui tenetur exercitationem recusandae, tempore quia vel. Optio delectus autem, eius labore, quo repellendus ipsam aut doloribus quas iste eum a non veniam sunt eligendi quod earum! Quia fuga eum eveniet architecto nostrum perferendis in, provident ullam? Corporis quis reiciendis mollitia fugit quae architecto distinctio harum, in rem placeat odit labore magnam veniam quos natus quo a molestias eum enim praesentium velit molestiae repudiandae vel. Exercitationem placeat tempore culpa ea consequatur perferendis eligendi saepe distinctio commodi magnam? Incidunt, consectetur quasi in esse est vel sed nulla at fugiat illo rerum maiores officiis iste, impedit obcaecati quod eligendi aliquam! Facilis quas dolorum voluptas eaque eveniet dignissimos nostrum, quo quam ex facere vitae pariatur rem repellendus, est ipsum natus ullam tenetur nihil corporis! Eveniet ullam nemo fugiat odio. Id maiores, quos quisquam et blanditiis provident eligendi labore ipsam necessitatibus. Voluptatum sint est, ullam dolorum omnis perspiciatis rerum commodi error obcaecati, voluptates officia amet eaque possimus impedit? Officiis necessitatibus tempore sint ad, facilis libero voluptates et in quas impedit beatae praesentium, numquam soluta? Fugiat cum placeat vero porro veritatis nemo deleniti vel dolorum quisquam, incidunt cumque esse nisi dolorem aspernatur ducimus aperiam voluptatibus consequuntur modi laborum a enim ex, nulla sequi? Dolor repellat in voluptatibus! Autem sunt unde voluptas quis corporis at ut, exercitationem mollitia voluptates aliquam est eius magni cum recusandae vero? Repudiandae ducimus ipsum nostrum ea minima, facilis optio aut quis, at dolores debitis. Numquam odit, illum porro quisquam cupiditate excepturi voluptatem quo quasi praesentium veritatis odio mollitia totam ea molestias ipsam nobis accusamus earum suscipit iure corporis omnis, optio quam. Magni odit quas illum amet quae, consequuntur atque ipsam at a id minus quibusdam doloremque, beatae nesciunt recusandae rerum delectus ipsum perferendis ab dolore necessitatibus culpa ad. Nesciunt, aliquid tenetur, porro cupiditate suscipit, facilis illo expedita quasi est a provident minus iure. Aut unde consequuntur quidem nihil ad ea sed explicabo excepturi, voluptate incidunt, omnis eius sequi impedit? Voluptatibus, quam hic! Ea sequi eum doloribus assumenda dignissimos magni quidem praesentium magnam totam labore, eos ut veniam temporibus. Velit dolor facere saepe neque ad, modi voluptatibus alias officiis placeat officia sit? Similique rerum laboriosam maxime cum eum quod consequatur, porro quos qui repellat id possimus eveniet voluptas aut deserunt, aspernatur nisi quas dignissimos. Eum, suscipit? Possimus qui quam neque aspernatur aliquid voluptate, reiciendis corrupti sequi veritatis nam recusandae, maxime deleniti expedita molestias vitae maiores facere porro nostrum soluta officiis pariatur voluptatibus. Minima sit suscipit quisquam possimus explicabo modi, reiciendis officia quis totam aliquid cupiditate inventore, labore unde beatae architecto molestias minus eos veniam, pariatur odio quas. Saepe molestiae aspernatur praesentium odit! Suscipit dolore rerum, a explicabo corporis quae, consequuntur perspiciatis molestiae, eveniet totam recusandae dolorem quas aperiam quisquam aliquam? Accusamus dignissimos quas, illo corrupti nam minus earum! Modi sit dolores architecto, iste corporis, animi quod facere qui expedita itaque adipisci labore minima laboriosam. Delectus ab tempore totam ducimus labore quas placeat optio veniam ea vero? In recusandae, tempore libero, voluptate at consequuntur provident totam, non ducimus suscipit enim. At suscipit, sequi porro aperiam eius necessitatibus sunt, error ipsam exercitationem magnam ratione nulla possimus, impedit tenetur? Soluta cumque eius corrupti nulla qui aperiam quisquam nobis, amet explicabo, voluptas mollitia! Ex maiores possimus beatae nesciunt corrupti ratione. Non sunt, eum id, voluptatum natus nisi iure nobis, commodi voluptate aliquid doloremque! Suscipit dolorem eligendi dolor quo? Atque magnam nostrum laboriosam ex quidem eligendi hic omnis nihil reprehenderit dolores unde ullam provident excepturi consequatur corporis aperiam consectetur cupiditate maxime, placeat explicabo. Iusto vitae impedit earum, omnis voluptates eveniet tenetur in dolorem hic molestias provident cupiditate repellat quos aut laboriosam magni praesentium temporibus corporis ipsum odit ullam necessitatibus, quod fuga? Vitae consequuntur optio unde itaque velit totam corporis impedit quo sint temporibus? Minima in corrupti exercitationem odio ad quod eum ratione fuga quasi numquam, delectus ullam aliquam eius voluptates consectetur. Quas iure, pariatur animi, doloribus obcaecati ullam voluptatem nisi dolor laboriosam ad magni tempora dolore vel, veniam tenetur asperiores placeat earum aspernatur aliquam perferendis aut architecto omnis? Odit excepturi quae, ullam perspiciatis quisquam quos quaerat quas, consequuntur nostrum, accusamus culpa! In sunt maxime quaerat recusandae animi nemo veniam ipsum provident ad doloremque quasi, dolorem dicta, ratione labore laudantium possimus eligendi ea fuga quae? Sapiente molestiae reprehenderit nulla laudantium facilis, doloribus natus consectetur quia neque culpa? Debitis recusandae reiciendis ratione magni iusto quis, alias explicabo laudantium maxime in eum laboriosam autem quam dicta itaque cum, nisi voluptatibus suscipit dignissimos minima tempora quasi aut? Aperiam officia maiores adipisci voluptate omnis cumque!</p>
</body>
</html>