html5 - Corner design in css -

-

this question has answer here:

i have image , wondering how design. how design highlighted borders in css , html.

enter image description here

use couple of pseudo elements , create triangles borders position them absolutely sit want.

more information on pseudo elements

example

div{      background:#999;      height:300px;      position:relative;      width:100px;  }  div::before,div::after{      content:"";      left:100px;      position:absolute;  }  div::before{      border-bottom:20px solid #333;  	border-right:20px solid transparent;      top:0;  }  div::after{      border-top:20px solid #333;  	border-right:20px solid transparent;      bottom:0;  }
<div></div>


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co...
Read more

java - UML - How would you draw a try catch in a sequence diagram? -

-
Image
is there standard way of drawing try catch sequence diagrams? i've made attempt based on this feel end result doesn't feel right. code diagram based around: public static void save () { try { filehandle filehandle = gdx.files.external(file); filehandle.writestring(boolean.tostring(constantshandler.soundenabled)+"\n", false); (int = 0; < 5; i++) { filehandle.writestring(integer.tostring(constantshandler.highscores[i])+"\n", true); } } catch (throwable e) { } } my attempt note: know still need add loop. that's ok. fragments meant show conditional control flow in sequence diagram. superstructures puts limitations on use of fragments (see pp. 467 of ss2.1.1). should use critical region try part above. , option catch . however, keep telling can take quite freedom in using uml. it's language , such changes in life time. long reader ge...
Read more

c++ - Gamma correction doesn't look properly corrected, is this linear? -

-
Image
i want implement gamma correction opengl lighting, gamma correction applied, results not seem linear @ all. i found opengl: gamma corrected image doesn't appear linear similar issue, hasn't yet received answer nor discussed actual diffuse lights. as illustration, have following 4 light colors defined in linear space: glm::vec3 lightcolors[] = { glm::vec3(0.25), glm::vec3(0.50), glm::vec3(0.75), glm::vec3(1.00) }; with each light source seperated , basic linear attenuation applied diffuse lighting equation following results: this fragment shader: void main() { vec3 lighting = vec3(0.0); for(int = 0; < 4; ++i) lighting += diffuse(normalize(fs_in.normal), fs_in.fragpos, lightpositions[i], lightcolors[i]); // lighting = pow(lighting, vec3(1.0/2.2)); fragcolor = vec4(lighting, 1.0f); } not barely see difference in brightness gamma corrected lights, attenuation distorted gamma correction. far understanding goe...
Read more