html - Shape resembling a compass pointer or inner part of a Safari logo -



html - Shape resembling a compass pointer or inner part of a Safari logo -

i trying create below shape using css. know achieving shape using image or svg lot easier trying accomplish css proof of concept.

the below code have tried far. creates diamond shape using transform: rotate(45deg) diagonals of same length whereas shape need has 1 long diagonal , short.

.separator{ background: #555; top: 40px; padding-top: 0px; margin: 0px 40px; height: 100px; width: 100px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }

fiddle demo

is possible create shape need using css?

note: similar question asked before , closed/deleted "too broad" did not show coding attempt. posting new question , self answering based on this meta discussion. please sense free chip in alternate solutions (or) edit question create more useful future readers.

for needle resting on tip

yes, possible create shape using css. have rotate shape along both y-axis , z-axis accomplish it.

rotating along z-axis 45 degrees produce diamond shape (as indicated in question) , rotating along y-axis close (but less than) 90 degrees create part of shape visible front end , thereby give appearance of having shorter diagonal lines (resembling compass pointer).

additionally adding linear-gradient background , inset box-shadow help accomplish shape lot closer shape shown in question.

class="snippet-code-css lang-css prettyprint-override">body { background: #333; font-family: calibri; font-size: 18px; } div { height: 200px; width: 150px; display: inline-block; vertical-align: middle; color: white; padding-top: 40px; } .separator { background: #555; top: 40px; padding-top: 0px; height: 160px; width: 160px; background-image: linear-gradient(-45deg, #555 0%, #555 40%, #444 50%, #333 97%); box-shadow: inset 6px 6px 22px 8px #272727; transform: rotatey(87deg) rotate(45deg); } class="snippet-code-html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div> lengthy paragraph content wraps around when exceeds width </div> <div class='separator'></div> <div> lengthy paragraph content wraps around when exceeds width </div>

for needle resting on base

for needle resting on base, rotation should along x-axis , z-axis instead of along y-axis , z-axis needle resting on tip. below sample snippet.

class="snippet-code-css lang-css prettyprint-override">body { background: #aaa; font-family: calibri; font-size: 18px; } div { height: 200px; width: 150px; display: inline-block; vertical-align: middle; color: white; padding-top: 40px; margin: 40px; } .separator { background: #555; top: 40px; padding-top: 0px; height: 160px; width: 160px; background-image: linear-gradient(-45deg, #555 0%, #555 40%, #444 50%, #333 97%); box-shadow: inset 6px 6px 22px 8px #272727; transform: rotatex(87deg) rotate(45deg); } class="snippet-code-html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class='separator'></div>

compass pointer created using above method:

here sample compass pointer (inspired in part safari logo) created purely using css. pointer or needle within created using method explained above.

class="snippet-code-css lang-css prettyprint-override">.container { position: relative; height: 152px; width: 152px; padding: 10px; border-radius: 50%; background: radial-gradient(circle @ 50% 50%, white 58%, #999 70%, #eee 80%); border: 1px solid #aaa; } .dial { height: 150px; width: 150px; border-radius: 50%; background: linear-gradient(#1ad4fd, #1d65f0 100%); border: 1px solid #999; position: relative; animation: rotatedial 2s 6 alternate forwards; } .dial:after { content: ''; position: absolute; top: 25px; left: 25px; height: 100px; width: 100px; background-image: linear-gradient(-45deg, white 0%, white 47%, reddish 50%); box-shadow: inset 0px 6px 22px 0px #ccc, inset -6px -6px 22px 0px #aaa; transform: rotatey(85deg) rotate(45deg); } .dial:before { content: ''; position: absolute; top: 72px; left: 70px; height: 8px; width: 8px; background: radial-gradient(circle @ 50% 50%, white 30%, gray 100%); border: 1px solid #999; border-radius: 50%; z-index: 2; } .hands, .hands-small { position: absolute; height: 150px; width: 150px; top: 11.25px; left: 11px; z-index: 0; } .hands:before, .hands:after, .hands .hand:before, .hands .hand:after { content: ''; position: absolute; top: 0; left: 74.5px; width: 1px; height: 12px; background: #eee; border-radius: 4px; box-shadow: 0px 138px #eee; transform-origin: 50% 75px; } .hands-small:before, .hands-small:after, .hands-small .hand-small:before, .hands-small .hand-small:after { content: ''; position: absolute; top: 0; left: 74.5px; width: 1px; height: 7px; background: #eee; border-radius: 4px; box-shadow: 0px 143px #eee; transform-origin: 50% 75px; } .hands:before { transform: rotate(-45deg); } .hands:after { transform: rotate(0deg); } .hand:before { transform: rotate(45deg); } .hand:after { transform: rotate(90deg); } .hands-small:before { transform: rotate(-22.5deg); } .hands-small:after { transform: rotate(22.5deg); } .hand-small:before { transform: rotate(67.5deg); } .hand-small:after { transform: rotate(112.5deg); } @keyframes rotatedial { 0% { transform: rotate(35deg); } 100% { transform: rotate(15deg); } } class="snippet-code-html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="container"> <div class="dial"></div> <div class="hands"> <div class="hand"></div> </div> <div class="hands-small"> <div class="hand-small"></div> </div> </div>

if stumbled on page looking svg implementation, have @ below snippet:

class="snippet-code-css lang-css prettyprint-override">.separator { position: relative; width: 12px; } svg { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } path { fill: url(#mygradient); } path#shade { stroke: #2e2e2e; stroke-width: 3; } /* demo style divs , position */ body { background: #333; font-family: calibri; font-size: 18px; } .container { display: flex; } .container > .content { flex: 1; flex-grow: 1; color: white; margin: 20px; } class="snippet-code-html lang-html prettyprint-override"><div class='container'> <div class='content'>some lengthy paragraph content wraps around when exceeds width.some lengthy paragraph content wraps around when exceeds width.some lengthy paragraph content wraps around when exceeds width.</div> <div class='separator'> <svg viewbox='0 0 10 200' preserveaspectratio='none'> <defs> <lineargradient id="mygradient" x1=' 50% ' y1='0% ' x2='50% ' y2='100% '> <stop offset="0%" stop-color="#333" /> <stop offset="100%" stop-color="#555" /> </lineargradient> </defs> <path d='m0,100 5,0 10,100 z' id='shade' /> <path d='m0,100 5,0 10,100 5,200 z ' /> </svg> </div> <div class='content '>some lengthy paragraph content wraps around when exceeds width.some lengthy paragraph content wraps around when exceeds width.some lengthy paragraph content wraps around when exceeds width.</div> </div>

html css css3 css-transforms css-shapes

Comments

Post a Comment

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* - i've inherited doc publishing process takes docbook , builds html , pdf output, using apache fop both. project had been started, never completed. lots of tweaking, i've able of doc sets build (20+), except handful, , fail severe code 1 of these 2 conditions: "fo:flow" missing kid elements. required content model: marker* "fo:block" not valid kid of "fo:root" the xml output comes out of docbook , docbook-fop checks out well-formed. the fop error in 1 book, "endecagloss", example, points end of string: <fo:flow flow-name="xsl-region-body" start-indent="4pc" end-indent="0pt"/> here’s log output in case: [java] severe: javax.xml.transform.transformerexception: file:/scratch/publishing/hudson/jobs/build-main-endeca-documentation/workspace/serverdoc/w...
Read more

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? - i want insert tables in infoboxes. example, have proteinbox i've developed using infobox template (http://health-and-medicine.wikia.com/wiki/template:proteinbox), , fasta field big fit comfortably in proteinbox. hence collapsible table within box. this tried: {{infobox | row 1 = {| class = "mw-collapsible mw-collapsed wikitable" |- | <!-- table content --> |} }} your problem is, putting nested table within template. pipe characters ( | ) in table syntax collides pipe usage in templates. the commonly used hack around create template called template:! , containing pipe character, , utilize when need set tables, parser functions or other stuff using pipe characters, within templates. table (with every | replaced {{!}} ): {{{!}} {{!}}- {{!}} a1 {{!}} b1 {{!}}- {{!}} a2 {{!}} b2 {{!}}} ...the equivalent of {| |- | a1 | b1 |- | a2 | b2 |} furthermore, hav...
Read more

Local Service User Logged into Windows -

Local Service User Logged into Windows - i created windows service tracks app server user connected through load balancer. it retrieves user logged windows on machine, cross references active directory (ad) business relationship homecoming first name, lastly name , e-mail (for notification through website created project) there 1 scheme on network users remote system, vista system, reason returning values "local service" logged machine, it's weird , security guys impossible "local service" business relationship logged windows. here how user logged windows managementscope ms = new managementscope("\\\\.\\root\\cimv2"); objectquery query = new objectquery("select * win32_computersystem"); managementobjectsearcher searcher = new managementobjectsearcher(ms, query); foreach (managementobject mo in searcher.get()) { _username = mo["username"].tostring(); } // remove domain part username string[] usernameparts = _...
Read more